click to edit master subtitle style usability and user interface design application
TRANSCRIPT
![Page 1: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/1.jpg)
Click to edit Master subtitle style
USABILITY and USER INTERFACE DESIGN
Application
![Page 2: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/2.jpg)
Exercise – Part 1
Design the web-site for your customer. (we will take the example of wikipedia website and analyse it).
Consider: What is the purpose of the web-site? Who are the users? What features and tools are needed in such a web-site?
Are these already documented as requirements?
Have you documented any usability requirements?
Choose the look-and-feel and layout.
Create a site map.
You should have done this already. Right?
![Page 3: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/3.jpg)
Site map
![Page 4: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/4.jpg)
Exercise – Part 2
Create a scenario for one part of the site based on your most important use case .
Create a (possibly paper) prototype that realizes your scenario.
Walk through the prototype yourself (pretend to be a user).
Think about the flow of the site, layout, visual appeal, use of colors, icons, etc.
Save your work!!!!!
![Page 5: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/5.jpg)
Interface/Dialogue Design
The team needs to worry about:Layout (of buttons, text, table data, …)Controlling data input (validation and format controls)Feedback (prompting, status, warning, and error messages)Dialogue sequencing
![Page 6: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/6.jpg)
What Is a Dialogue?
A sequence of interactions between the system and a user
Dialogue design involves:Designing a dialogue sequence
Building a prototype
Assessing usability
![Page 7: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/7.jpg)
GUI Design Guidelines
User in control
Consistency
Personalization & Customization
Forgiveness
Feedback
Aesthetics & Usability
![Page 8: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/8.jpg)
User in Control
users should feel that they initiate and control actions
![Page 9: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/9.jpg)
Consistency
The conformance to the naming, coding and other GUI-related standards developed internally by the organization
This includes the naming and coding of menus, action buttons, screen fields, etc. It also includes standards for the placement of screen objects and consistent use of other GUI elements across applications.
![Page 10: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/10.jpg)
Personalization & Customization
GUI personalization is customization for personal use
e.g. a user reorders and resizes columns in a grid display and saves these changes as preferences
GUI customization is an administrative task of tailoring the software to different groups of users
e.g. when the program operates differently for novice and advanced users
![Page 11: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/11.jpg)
Forgiveness
A good interface allows users to experiment and make mistakes in a “forgiving” way
Forgiveness encourages interface exploration because the user is allowed to take erroneous routes that can be “rolled back”.
![Page 12: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/12.jpg)
Feedback
It tells the user what’s happening, or what’s going to happen next, and without it the user is left guessing or frustrated.
![Page 13: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/13.jpg)
Aesthetics & Usability
Aesthetics is about visual appeal.
Usability is about the ease, simplicity, efficiency, reliability in using the interface.
![Page 14: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/14.jpg)
Aesthetics and Usability
The issues to consider includethe use of colors,
the alignment and spacing of elements,
the sense of proportion,
the grouping of related elements, etc.
![Page 15: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/15.jpg)
Exercise – Part 3
Choose one more scenario for your web-site based on your use cases.Create a prototype (paper, HTML, Visio, …) for this scenario.Save your work!!!!!
![Page 16: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/16.jpg)
Ten Golden Usability RulesA great set of guidelines created by Jakob Nielsen in his book Usability Engineering.
1. Use simple and natural dialog/language.
User interfaces should be simplified as much as possible, eliminating as much as possible the additional features.
![Page 17: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/17.jpg)
Ten Golden Usability Rules
2. Use language that fits the user group.
The language should be based on user’s language. Time, currency, phrases, metaphors, measurements, etc. must fit the culture of the user group.
![Page 18: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/18.jpg)
Ten Golden Usability Rules
3. Minimize the load on short-term memory.
Users should not have to remember information from one part of the dialogue to another.
![Page 19: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/19.jpg)
Ten Golden Usability Rules
4. Make the graphical user interface coherent and consistent.
The same action should always have the same effect. Users will feel confident in using the system.Example: open in a new tab
![Page 20: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/20.jpg)
Ten Golden Usability Rules
5. Give the ability to use shortcuts. function keys, command keys, macros,
etc. to speed up the interaction for the expert’s users
![Page 21: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/21.jpg)
Ten Golden Usability Rules
6. Give feedback to the user's actions. The system should always keep users
informed about what is going on, through appropriate feedback within reasonable time.
![Page 22: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/22.jpg)
Ten Golden Usability Rules
7. Avoid error situations. Ask the user if s/he really wants to do
the action especially if the action leads to serious consequences. Avoid having too similar commands in the interface.
Commands whose actions are opposite should not be placed close to each other.
![Page 23: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/23.jpg)
Ten Golden Usability Rules
8. Give clear exit marks. In the navigation bars, the users should
be able to back up.
![Page 24: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/24.jpg)
Ten Golden Usability Rules
9. Give clear and understandable error messages.
Simple rules for error messages: should be phrased clearly and avoid obscure codesmessages should be polite and not intimidate the user or put the blame explicitly on the user
![Page 25: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/25.jpg)
Ten Golden Usability Rules
10. Give clear help and understandable documentation.
Information should be easy to search.
The help manual should not be too large.
![Page 26: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/26.jpg)
Usability testing
![Page 27: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/27.jpg)
Step 1: Plan the Tests
Determine how many users will participate in the testEstimate how many tests will be required over the development cycleDetermine usability objectives and what functions will be testedDevelop evaluation measures (timing data, error counts, rating scales, etc.)
![Page 28: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/28.jpg)
Step 2: Conduct the Tests
Provide introduction/overview for users (reinforce the fact that the application or website is being tested; the users are NOT the subjects of the test)Provide training for usersHave observers watch, listen, and take notes
![Page 29: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/29.jpg)
Watch Users Work!!
Sometimes users will say they are likely to do something, but their actual behavior indicates otherwise.Better to learn from observing direct user behavior.Watch them as they attempt to use your application or website.DTM (Duct-Tape Method)
![Page 30: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/30.jpg)
Step 3: Debrief the Users
Collect observation/evaluation data from users
Have users complete evaluation forms
Allow users to express their reactions about the test
![Page 31: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/31.jpg)
Post-Test Work
Analyze data
Identify usability problems AND SOLUTIONS
Identify problem severity
Identify software bugs (maybe)
Conduct second round of testing (if necessary) and if time/resources permit
![Page 32: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/32.jpg)
Exercise – Part 4
Evaluate your GUI for your web-site (consider the usability principles and testing techniques).
Plan tests for at least the four scenarios that you have previously created.
Get at least three users (people who are NOT in this class) to walk through and evaluate your design.
Perform your measurements, interviews, observations, etc.
![Page 33: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application](https://reader036.vdocuments.mx/reader036/viewer/2022062802/56649ea85503460f94bab82f/html5/thumbnails/33.jpg)
Exercise – Part 5
Summarize what you have learned in terms of usability principles.