User Interface Design Lecture Notes PDF

USER INTERFACE DESIGN By Dr. Ahmed Gamal Abdellatif  Outlines 3I Dimensions of Usability II HOW LEARN A NEW UI ENTRY DEVICES ? III 3 SAFETY IV ERROR TYPES V 3 Discussion VI Quiz  WHY USABILITY ? Usability is about creating effecti...

USER INTERFACE DESIGN By Dr. Ahmed Gamal Abdellatif  Outlines 3I Dimensions of Usability II HOW LEARN A NEW UI ENTRY DEVICES ? III 3 SAFETY IV ERROR TYPES V 3 Discussion VI Quiz  WHY USABILITY ? Usability is about creating effective user interfaces (UIs). So, adding a pretty window interface on a program will automatically confer usability on it. Usability = how well users can use the system’s functionality  Dimensions of usability  Learnability (L): is it easy to learn?  Efficiency (E): once learned, is it fast to use? Safety (S): are errors few and recoverable? Other dimensions are relevant too.  Ergonomics: comfort, fatigue.  Aesthetics: satisfaction, happiness, pleasure. But we’ll mostly focus on LES. Learnability considers how easy it is for users to accomplish a task the first time they encounter the interface and how many repetitions it takes for them to become efficient at that task. USABILITY DIMENSIONS VARY IN IMPORTANCE  It depends on the user but no user is uniformly a novice or an expert so:  Novice users need learnability.  Experts need efficiency.  Depends on the task.  HOW WE LEARN A NEW USER INTERFACE ENTRY DEVICES?  Learning by doing, in which the user explores the interface for features that satisfy the goal.  Seeking help so, Users resort to seeking help when they get stuck.  Try it like Google auto suggest to find LEARNABILITY problems.  Learning by watching. 5 6 EFFICIENCY Efficiency measures the speed and how quickly the users can accomplish the tasks once they have become familiarized with the design of an interface. like the number of keystrokes or clicks it takes a user to complete the task. UI HALL OF FAME OR SHAME? How to improve Efficiency  improve Efficiency of Output : Present information in easily- recognized chunks.  CHUNKING :is a unit of memory or perception and Depends both on presentation and on what you already know.  Working Memory :Small: 4 ± 1 “chunks”  Short-lived: ~10 sec.  Example:  Hard: M W B C R A L O A B I M B F I  Easier: MWB / CRA / LOA / BIM / BFI  Easiest: BMW / RCA / AOL / IBM / FBI  Hard: 9405510200793831994315  Easier: 9405 / 5102 / 0079 / 3831 / 994 / 315  Easiest: klar / fonz / apek / uwer 8  improve Efficiency of Mouse:  Make frequently-used targets big.  Put targets used together near each other.  Use screen corners and screen edges.  Avoid steering tasks by minimize the steering distance.  improve Efficiency of Shortcuts:  Keyboard commands by Choosing keyboard shortcuts so that they are easily associated with the command in the user’s memory. 9  improve Efficiency of History:  Offer recently-used or frequently-used choices. 10  improve Efficiency of AUTOCOMPLETE: By Minimizing typing with autocomplete.  improve Efficiency of AGGREGATION: Aggregation is an excellent way to add efficiency to an interface. Think about ways that a user can collect several items—data objects, decisions, graphical objects, whatever—and handle them all at once, as a group. multiple selection for action multiple drag & drop 11 ANTICIPATION Means that a good design should put all needed information and tools for a particular task within the user’s easy reach. If the task requires a feature from the interface that isn’t immediately available in the current mode, then the user may have to back out of what they’re doing, at a cost to efficiency. 12  ERROR TYPES Slips and lapses (Typically found in skilled behavior) so, Slip is a failure of execution, lapse is a failure of memory, and Failure to correctly execute a procedure like clicking before the mouse pointer is over the button, is a slip.so, An error in the execution of any learned procedure would be a slip. Mistakes are Typically found in rule-based behavior or problem-solving behavior. 13 Mode Errors: Description: Mode errors happen when the system allows a user to perform the same action in different modes, but the outcome varies based on the mode. Example: In a software application, pressing the "Delete" key might delete a character in one mode but delete an entire word in another mode. Impact: Mode errors can lead to confusion and mistakes as users might not be aware of the current mode or its implications. Description Errors: Description: Description errors occur when the system provides inadequate or misleading information about its current state or the available actions. Example: A progress bar that doesn't update properly or error messages that are vague and unhelpful. Impact: Description errors can cause frustration, user errors, and a lack of trust in the system. Capture Errors: Description: Capture errors involve mistakes made during data entry or interaction where the user's input is not accurately captured by the system. Example: A form that doesn't validate input correctly or a system that misinterprets user gestures. Impact: Capture errors can lead to incorrect data being entered, loss of user input, or unexpected system behavior. 14 CAUSES OF SLIPS  Automaticity:  Interference:  Misinterpretation:  Ambiguity:  Fatigue:  Lack of Feedback:  Environmental Factors:  Time Pressure:  Memory Lapses:  Inattention or inappropriate attention:  Speed/accuracy tradeoff: 15  ERROR PREVENTION  Safety from Capture Errors:  Avoid habitual action sequences with identical prefixes.  Avoid actions with very similar descriptions.  Keep dangerous commands away from common ones. 16 CONFIRMATION DIALOGS 17  Writing Error Message Dialogs Errors should be prevented and The best error message is none at all. So, Be precise ,and Speak the user’s language. 18 USER CONTROL OVER DATA Data entered by the user should be editable by the user and the UI should give the power to:  Create a data item.  Read it.  Update it.  Delete it.  Note That: NO ARBITRARY LIMITS ON USER-DEFINED NAMES. 19 QUIZ- ONE Question-One: True or False: 1- Multimedia better than tangible interfaces for learning ( ) 2- Speech as effective as a command- based interface ( ) 3-Wearable interfaces be better than mobile interfaces for helping people find information in foreign cities ( ) 4- UI is critical to the success of the application ( ) 5- UI designers are responsible for taking care of accessibility ( ) Question-Two: State the difference between Usability and Usefulness. Question-Three: State only a three of Graphical System Advantages. 20 Thanks for Your Attention 21