...
During initial user testing of our computer prototype (both the heuristic evaluation and in-class demo) we received feedback that the color choice should be re-examined. Some people felt that the red of the buttons indicated importance or error. As it is true that red is usually used to signal error or importance, we felt that the application had a general red look and feel; there is enough red on the page (logo, all buttons, shadow, etc) that the red does not pop out to the user and look as if it requires attention. The red and grey colors were chosen to give an MIT feel to the application.
Grouping
Grouping
One major design decision that was influenced by the heuristic evaluation is the structure of the middle panel. Initially, the jobs listed in the middle panel were grouped into three different categories: unassigned, assigned, and completed. This allowed the user to quickly discern the status of a repair job and find unassigned and assigned jobs quickly and efficiently. We found this to be an issue during the heuristic evaluation. It became a problem trying to keep a consistent layout with a varying number of jobs in each section; listing all jobs in a group didn't work well, fixed heights of each group didn't work well, and finally hiding empty groups (zero jobs) didn't work well. For this reason, we pivoted and built the middle panel to list all jobs and provided labels to allow the user to discern job status. Every job is listed and has a colored label indicating the status of a job (green = assigned, blue = unassigned, orange = completed). If the job has been assigned or completed, a picture of the mechanic responsible for the job is associated with the particular job. Or else, a default picture is chosen. This allows for quick scanning of a particular mechanic's jobs.
...
The assignment and un-assignment of jobs is an integral part of our application for the purpose of safety. It 's is important that this feature is very simple, yet but still gets the job done. Assignment is easy, ; choose a mechanic and click on the assign button. The more interesting case is how to un-assign a job or re-assign it to someone else. Ultimately another worker. Ultimately, we went with a simple options of assign and un-assign. If a job is not assigned, it can be assigned by choosing a worker and clicking "assign". If a job is assigned, it can be un-assigned by clicking "un-assign". We considered a re-assignment option, but this ultimately looked and felt overly complicated. In We wanted the button to do exactly what the text said. An "re-assign" button would have been actually just unassigning. So in the case a user actually needs to re-assign a job, they can simply un-assign and re-assign the job.
...
EZ-FIX is implemented as a web application ; it is written in htmlHTML, cssCSS, and javascriptJavaScript. A choice was made to use well known, trusted frameworks as to mitigate cross-browser conflicts. For this reason, we decided to use Twitter Bootstrap's CSS and Javascript JavaScript framework for major layout and JQuery jQuery for javascript JavaScript functionality.
The layout of the UI is structured using Bootstrap's grid layout. There are three major columns: one for tabs/filtering, one for listing jobs, and one for displaying the detailed information for the selected job. In addition, at the top of the page, there is a navigation bar that includes a system search field and user options (logout).
The javascript JavaScript code is very cleanly separated into modular components. EZ-FIX mainly consists of models to hold the data, event listeners to capture user actions, and functions to handle user actions. There are 3 main models in our application: jobs, updates, and people. Each model is constructed with available information retrieved from Firebase (described below) and contains appropriate mutator methods.
There is technically no "backend" to our application; rather, we're using Firebase to persist all changes. Firebase provides a javascript JavaScript library that gives an API to create, read, update, and destroy data. Every addition, deletion and modification to the database triggers and event to be called on each client connected. More succinctly, it allows us to easily handle creation and modification of data. All jobs, updates, and people are loaded onto the client through firebase Firebase as soon as the page is loaded.
The clean separation of concerns of our front end code allowed changes and new features to be quickly built. The typical flow is: a user makes an update to an existing model instance (stars a job, adds a label, creates an update, etc), the client side code calls the appropriate mutator method on the object, the mutator method takes care of persisting the change by updating Firebase, finally the view renders the updated instance. The simplicity of this flow allows for additional features to be very easily implemented by simply adding the corresponding model methods and view changes.
...
EZ-FIX is designed for housing managers , as such so it is ideal to do user testing on them. Unfortunately, the semester wrapping up and Bexley hall closing has consumed resources with end of the semester duties and the closing of Bexley Hall, most of the house managers who we were originally in contact with were busier than normal, and we were only able to do user testing on one house manager. This However, the specific house manager was part of our initial need finding and was familiar with the problem we were trying to solve.
In In addition to the one house manager, we were able to user test on one professional staff and two student desk workers. The professional staff is close to our target user population because she is responsible for contacting various services (elevator and plumbing repair) for jobs within McCormick Hall and cares more about the overview of the facility status. Finally, student desk workers were chose and chosen as the closest alternative because they are sometimes faced with repair requests and are well informed of the building status. We noticed that the users had different technical abilities. Some users were familiar with Google Mail while others were not. While While this didn't affect the user's ability to test our system, it did have an effect on the learnability of various features (starring for example) since some of our features are similar to GMail.
Users were briefed by being told of with the problem statement -- that house manager managers have a difficult time organizing and prioritizing repair requests and currently, the primary method for doing so it is done by making mental notes. They Users were told that they are acting as the house manager of McCormick hall Hall and were not given a demo of the application. They A demo was not given because we felt that showing users how to perform different tasks would prevent us from finding learnability issues. They were asked to speak aloud and especially note things aspects that they find confusing or visually unappealing so that we could get have a better sense of the problems that they experience. A demo was not given because we felt that showing users how to perform different tasks would prevent us from finding learnability issueswere experiencing during the process.
Users were asked to perform the following set of tasks, one after another. In certain cases they would hit other areas of the application that were not being explicitly asked for. For example, some users would create a label for "important" jobs, while others would use the star to signify importance. The database was dumped and reloaded before each user session as an effort to control user testing.
...
- Did not know to star a job in order to mark it as important
- Severity: Major - Marking a job as important by using the star is a important and useful feature for house managers.
- Solution: Better indicate ability to star jobs or some way to indicate that a star means important.
- Was looking down at the keyboard while typing in the search bar and did not realize that jobs were automatically being filtered while he typed.
- Severity: Minor - This feature simply increases efficiency, but isn't necessary.
- Solution: Better indicate this automatically filter feature through text.
- Attempted to get back to the All page and view all jobs but was unable to because there was text in the search bar.
- Severity: Major - Not remembering there is text in the search bar will hide lots of jobs.
- Solution: Clear the search box when any additional filtering action is taken to forcing filter then search as opposed to search then filter.
- Got confused about the default text in the textfields for creating a new job. He thought that upon clicking in the textfield the text would go away but it didn't. He tried to backspace to delete it, which didn't work, so he gave up and just started typing, which made the default text go away.
- Severity: Minor - Eventually figured out how to get rid of text and will now know when creating jobs in the future.
- Solution: Clear the textfield when the user clicks inside it; this would be more consistent with other applications.
- Tried to look up "Jenks Jenkinson" in the main page search bar when he was asked to find contact information for Jenks.
- Severity: Minor - All the jobs assigned to Jenks appeared in the middle panel, but no contact information appeared. The user soon found the address book and was able to find Jenks' contact information there.
- Solution: Include the assignee's contact information in the assignment section of the right panel, or make it more obvious that the search bar on the main page only searches through job entries and not contact information.
- Pressed enter in an attempt to submit text in the large textfields (i.e., updates section and description for a new creating job), but which resulted in cursor moving to the next line.
- Severity: Major - The house manager does not type that much in either of these textfields and would prefer to hit enter for submission for efficiency sake.
- Solution: Listen to the house manager and implement this feature to submit on hitting enter. Should assume that the update will be short and will not need multiple lines.
Professional Staff
- Did not immediately realize the jobs could be clicked.
- Severity: Minor - Figured out jobs were clickable then never experience problem again.
- Solution: Affordance for clicking is already implemented, try but trying making it more apparent. Maybe change the right panel's text of "no job selected" to say "no job selected. Select one on the left for more details"
- Could not figure out how to make the job "important", instead made an update noting that the job was important.
- Severity: Major - Filtering important job, whether it is starred or labeled, is a crucial feature for house managers.
- Solution: Better indicate ability to star jobs , or create a default important label. This is something that we will have to iterate through and determine if star actually means "importance" to them.
- Had a very difficult time marking a job as "mechanical". Tried to filter and assign a mechanic.
- Severity: Major - Did not understand labels and how they affect jobs.
- Solution: Have a way of teaching the users when they first log on to the page what it means to label something.
- A lot of trouble finding all jobs in McCormick, but A lot of trouble finding all jobs in McCormick, eventually used search feature.
- Severity: Minor - Once feature was used, it was quickly learned.
- Solution: Possibly auto tag location and create tabs for them in the left-most column.
- Attempted to click all to remove "McCormick" text from the search bar -- did not realize text still remained.
- Severity: Major - Not remembering there is text in the search bar will hide lots of jobs.
- Solution: Clear the search box when any additional filtering action is taken forcing filter then search opposed to search then filter (similar to the feedback from the house manager).
- Difficulty finding the button to create a new job.
- Severity: Cosmetic - The text "+ Job" was not clear to the user.
- Solution: Consider changing the wording, "Create Job" or "New Job".
- Kept using "Submit" on update form for any change made to the job, whether it was an update or not (mark complete/incomplete, assign, un-assign).
- Severity: Major - User does not understand the update feature.
- Solution: Possibly disable the submit button until there is text, additionally disable the assign button until a person is selectedthe submit button until there is text, additionally disable the assign button until a person is selected. Another option is to reword the button to say "submit update" or something to indicate the distinction between assigning and submitting update.
General actions: Kept on trying to do the labelling and assigning of the jobs in between us giving her tasks to complete. She seemed genuinely interested in seeing how useful the application could be and how it could be applied to McCormick Hall.
Desk-worker 1
- Could not easily discern the meaning of "important", looked to add an important label versus starring it.
- Severity: Minor - Choose to use the application in a way unexpected to developers but still works.
- Solution: Have a default important label that is linked to star.
- Attempt to add label clicking the filter for the given label -- click "Mechanical" to add label.
- Severity: Minor - Quickly realized this filters and looked to find out how to add label.
- Solution: Have more tooltips / ways of indication of adding labels.
- Confused as to how communication with mechanic was done through the update widget, especially when no previous updates from mechanic listed. "Does starring let him know it's important? I don't know how to communicate him through this."
- Severity: Major - Communication with mechanics is critical to this web application.
- Solution: Show more indication that updates will notify mechanics.
- "This is really cool and addictive. I want to assign everything to Jenks Jenkinson and Billy Bobby because I'm Michael McIntyre and I don't want to do anything."
- Severity: Good.
- Solution: Nothing.
...
As a result of this project, our team learned that using an iterative design process, specifically the spiral model, results in a better product and also reduces stress and time wasted along the way.
If we had jumped right in and implemented our website before interviewing potential users or doing any user testing, we would have created a high fidelity product that might not have met users’ goals in terms of functionality, and the product probably would not have had a good user interface design. ThenAlso, if we were to conduct user testing after the high fidelity implementation, we may have been stubborn and not wanted to make changes that users suggested suggest to us. Or alternativelyAlternatively, we would have wanted to make the changes users suggested to us, but that potentially would have required us to completely change the design of our interface, which would take much time and effort.
...
Finally, it would be nice to alter the update widget to be more inclusive of job activity and perhaps change it to an activity widget. It's probable the house manager would like to know when he assigned a job, when (and maybe why) he re-assigned a job, etc. More need finding and user testing would lead us to implementing this to accommodate the house manager's needs but it seems as if this would eventually be implemented given more time.