UI/UX Design Principles

USER INTERAFCE AND USER EXPERINECE Make website user-friendly Enhance the visual appeal Engage User visually Optimize navigation Optimize structure Make sure that user can find information fast and effortlessly. Cognitive Ergonomics In the field of user experience, we use the follow...

USER INTERAFCE AND USER EXPERINECE Make website user-friendly Enhance the visual appeal Engage User visually Optimize navigation Optimize structure Make sure that user can find information fast and effortlessly. Cognitive Ergonomics In the field of user experience, we use the following definition: - the cognitive load imposed by a user interface is the amount of mental resources that is required to operate the system. - Informally, you can think of mental resources as "brain power”. Good UI minimizes cognitive load  HIGH LOW Cognitive Load Cognitive Load  HIGH LOW Cognitive Load Cognitive Load Bootstrap Bootstrap is the most popular HTML, CSS and JS framework for developing RESPONSIVE AND FLEXIBLE designs for a web page. Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops. Fitts’s Law Fitts's Law states that the movement time to a target is dependent on the distance to the target and the size of the target. This law especially applies to buttons, which the purpose of these elements is to be easy to find and select. If accuracy is important, make sure that the target is large and closer to the pointer. If you don’t want the target to be frequently used or accidently activated, place the target further away and make it smaller. https://vimeo.com/200436363 Fitts’s Law - Index of Difficulty (ID) Example question We have two UI designs (figures a and b) 1. figure a. Only the text is clickable D 2. figure b. The whole box is clickable Which UI design has a higher ID? Let's assume the distance (D) is 1 in both design. Widths (W) of the UI elements in figures a and b are 1 and 2, D respectively. Figure a Figure b Fitts’s Law - Index of Difficulty (ID) Fitts’ law says that the time to reach Target A is shorter than the time to reach any of the other targets. Although Targets A and B have the same size, the distance from cursor to A (d1) is shorter than the distance to B (d2), so movement to A will be faster. Target C is placed at the same distance (d1) from the cursor as Target A, but it’s smaller, so it will take longer to move the cursor to it than to A. Example question Based on the Fitt’s Law, why do we put New Tab on the Top and the Exit Tab on the bottom? - Make it EASIER and MORE EFFCIENT for users to select the options they need. - It reduce the USER ERROR! - Reduce TIME and EFFORT required for users to complete tasks. Hick’s Law The time it takes to make a decision increases with THE NUMBER AND COMPLEXITY OF CHOICES. More choices results in longer to think about these choices and make a decision. Simplify choices for the user to ensure by breaking complex tasks into smaller steps. Avoid overwhelming users by highlighting recommended options. Hick’s Law ECMAScript (ES) ECMAScript (or ES) is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. It is standardized by the European Computer Manufacturers Association (ECMA) International. Variables In addition to var, you can also use letand const. lethas a smaller scope than var—it is limited to the block surrounding it. constis the same as let, but the value cannot be reassigned. Example question Which of the variables we can use in block scope and can not be reassigned ? - const Which of the variables we can use in block scope and can be reassigned ? - let Spread operator Three dots before an array expands it into separate values: let numbers = [1, 5, 20]; // Before: let result = sum(numbers, numbers, numbers); // After: let result = sum(...numbers); You can use this to quickly concatenate several arrays: var even = [2, 4, 6]; var odd = [1, 3, 5]; var all = [...odd,...even]; // [1, 3, 5, 2, 4, 6] Template literals Prior to ES6, strings are delimited by either a pair of single quotes('string') or a pair of double quotes("string"). In ES6 or later, strings can also be delimited by a pair of back-ticks (`string`). Such strings are called template literals. Output multi-line strings: Screen output: console.log('string text line 1\n' + 'string text line 2’); str in g te xt l i n e 1 str in g te xt l i n e 2 Using template literals, you can do the same as this: console.log(`string text line 1 string text line 2`); Personas Begin with an understanding of the intended users, including population profiles (demographics) that reflect their age, gender, physical and cognitive abilities, education, cultural or ethnic backgrounds, training, motivation, goals, personality, location (urban vs. rural), economic profile, disabilities, attitudes toward using technology. Personas can help RECOGNIZE the needs and EXPECTATIONS of the major users of the system. We need to understand the differences in users’ background knowledge, frequency of use, goals, and the impact of user errors. Information Architecture The practice of ORGANIZING AND LABELLING content on websites and mobile applications to support USABILITY and FINDABILITY. Information architecture is the practice of deciding how to arrange the parts of something to be understandable. Information Architecture – Labelling system A labeling system in information architecture refers to the way information is represented to users, including the naming conventions, terminology, and organizational schemes used within a digital product, such as a website or an application. The goal of a good labeling system is to make information findable and understandable to users, enhancing usability and user experience. Labelling systems help users navigate and understand content. Effective labelling contributes to a good user experience by making interfaces intuitive and information easy to access Example question Why a good labelling system is important and which Newspaper of the design is Vet better and why? restaurant swimming lazyyy Happy and Sad Affordance When we talk about affordance in the context of a mobile interface, we’re referring to any object with utility —any object that offers interaction affords use. Affordance in interface design relies heavily on signifiers and is often determined by a user’s previous experience and appetite for discovery. Remember, affordancesare what an object can do based on a user interaction.  Affordance in UI Design (Digital) BUTTON SELECTION LIST CLICKABLE LINKS Signifier A signifier is some sort of indicator (in the physical or digital world) or signals, that can be interpreted meaningfully. Examples: signs, labels and drawings placed in the world Signifiers can be used to enhance affordance. Signifier Signifier Identify signifier and affordances? What is the relationship between them? Principles: The Eight Golden Rules of Interface Design (Shneiderman, 1985) 1. Strive for consistency 2. Seek universal usability 3. Offer information feedback 4. Design dialogs to yield closure 5. Prevent errors 6. Permit easy reversal of actions 7. Keep users in control 8. Reduce short-term memory load 1. Strive for consistency Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent color, layout, capitalization, fonts, and so on, should be employed throughout. 2. Seek universal usability Recognize the needs of diverse users. Adding features for novices, such as explanations, and features for experts, such as shortcuts and faster pacing. For example, both Windows and Mac provide users with keyboard shortcuts for copying and pasting, so as the user becomes more experienced, they can navigate and operate the user interface more quickly and effortlessly. 3. Offer informative feedback For every user action, there should be an interface feedback. For frequent and minor actions, the response can be modest, whereas for infrequent and major actions, the response should be more substantial. Visual presentation of the objects of interest provides a convenient environment for showing changes explicitly. Poorly designed error messages often show an error- code that does not mean anything to the user. 4. Design dialogs to yield closure Sequences of actions should be organized into groups with a beginning, middle, and end. Don’t keep your users guessing. Tell them what their action has led them to. For example, e-commerce websites move users from selecting products to the checkout, ending with a clear confirmation page that completes the transaction. 5. Prevent errors No one likes to be told they’re wrong, especially your users. Systems should be designed to be as fool-proof as possible, but when unavoidable errors occur, ensure users are provided with simple, intuitive step-by-step instructions to solve the problem as quickly and painlessly as possible. For example, flag the text fields where the users forgot to provide input in an online form. 6. Permit easy reversal of actions As much as possible, actions should be reversible. This feature relieves anxiety, since users know that errors can be undone, and encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data-entry task, or a complete group of actions, such as entry of a name-address block. 7. Keep users in control Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don’t want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary information, and inability to produce their desired result. 8. Reduce short-term memory load Humans’ limited capacity for information processing in short-term memory (the rule of thumb is that people can remember “seven plus or minus two chunks” of information) requires that designers avoid interfaces in which users must remember information from one display and then use that information on another display. It means that cellphones should not require re-entry of phone numbers, website locations, and lengthy forms should be able to recall. Principles: The 10 User Interface Design Guidelines* (Nielsen and Molich) 1.Visibility of system status 2.Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8.Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10.Help and documentation 1. Visibility of system status Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time. A change of color once the user has clicked on a button, or a progress indicator when a process needs a little longer to finish. These indicators show that the system is working, and reduce uncertainty — e.g., users may tap on the same button multiple times because they weren’t sure if the first time worked. Providing immediate feedback for interactive events allows users to quickly identify the source of errors and fix Color change to indicate delays them as soon as they were made.  2. Match between system and the real world Designers should endeavor to mirror the language and concepts users would find in the real world based on who their target users are. Presenting information in logical order and piggybacking on user’s expectations derived from their real-world experiences will reduce cognitive strain and make systems easier to use. Leverage familiarity with real-world objects and activities When users transition from the physical world to the digital world, they carry the interpretations based on their past experiences with real-world objects. Users expect that UI elements which reflect material What Principle? objects be similar to those objects from the real world. DIRECT MANIPULATION INTERAFCE  3. User control and freedom Offer user a digital space where backward steps are possible, including undoing and redoing. Users often choose system functions by mistake and will need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 4. Consistency and standards Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms. For example, an icon that represents one category or concept should not represent a different concept when used on a different screen. 5. Error prevention Whenever possible, design systems so that potential errors are kept to a minimum. Users do not like being called upon to detect and remedy problems, which may on occasion be beyond their level of expertise. Eliminating or flagging actions that may result in errors are two possible means of achieving error prevention. 6. Recognition rather than recall Minimize cognitive load by maintaining task-relevant information within the display while users explore the interface. Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Due to the limitations of short-term memory, designers should ensure users can simply employ recognition instead of recalling information across parts of the dialogue. Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface. 7. Flexibility and efficiency of use With increased use comes the demand for less interactions that allow faster navigation. This can be achieved by using abbreviations, function keys, hidden commands and macro facilities. Users should be able to customize or tailor the interface to suit their needs so that frequent actions can be achieved through more convenient means. 8. Aesthetic and minimalist design Keep clutter to a minimum. All unnecessary information competes for the user's limited attentional resources, which could inhibit user’s memory retrieval of relevant information. Therefore, the display must be reduced to only the necessary components for the current tasks, whilst providing clearly visible and unambiguous means of navigating to other content. 9. Help users recognize, diagnose, and recover from errors Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation. 10. Help and documentation Ideally, we want users to navigate the system without having to resort to documentation. However, depending on the type of solution, documentation may be necessary. When users require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing.