UI/UX Principles (PDF)

Did you submit your declaration of Academic Integrity? (for MS1 and soon for Assignment 1) Milestone 2 is due on week 7, Friday 04 October, 23:59.  Computational Problem Solving User Interface and User eXperience  Today’s class A brief history of UI/UX Guidelines UX design  Today’s cla...

Did you submit your declaration of Academic Integrity? (for MS1 and soon for Assignment 1) Milestone 2 is due on week 7, Friday 04 October, 23:59.  Computational Problem Solving User Interface and User eXperience  Today’s class A brief history of UI/UX Guidelines UX design  Today’s class A brief history of UI/UX Guidelines UX design A computer interacts with the outside world through interfaces network peripheral interface user interface interface A computer interacts with the outside world through interfaces Computer-user interface or simply user interface, the interface that allows interaction between the computer and the user network peripheral interface user interface interface User interface - Hardware and Software interfaces First electronic digital computers from 40s to 70s - input = punched cards output = punched cards or line printer 😱 no real-time interaction Batch interface User interface - Hardware and Software interfaces From 50s development of Cathode-Ray Tubes (CRT) displays (e.g for televisions, radars) From 70s output = video display real-time interaction Command line interface in Operating Systems like Unix, MS DOS User interface - Hardware and Software interfaces From 60s development of pointing devices such as the mouse From 70s output = video display input = mouse real-time interaction Graphical user interface like MS Windows User interface - Hardware and Software interfaces From 2000s output = touchscreen input = touchscreen real-time interaction Touch user interface In 2007, introduction of the first iPhone  User interface - Hardware and Software interfaces Appel Siri, Amazon Alexa, Microsoft Cortana, Google Assistant From 2010’s output = voice input = voice 2011 2014 2014 2016 real-time interaction Conversational user interface User interface - Hardware and Software interfaces From 2010’s output = voice input = voice real-time interaction Conversational user interface Rabbit R1 (Jan 2024) using voice and touch interactions only User interface - Hardware and Software interfaces What other UI do you know? UI - the interface that allows interaction between the computer and the user User interface - Hardware and Software interfaces 3D GUI Brain-Computer Interface User interface - Hardware and Software interfaces From UI to UX  User interface - Hardware and Software interfaces “I invented the term because I thought human interface and usability were too narrow: I From UI to UX wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.” User eXperience Usability is the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience.  User interface - Hardware and Software interfaces 1986 1988 1993 “I invented the term because I thought human interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.” Donal Norman Researcher in Psychology User eXperience a new concept encompassing all aspects of user’s experience with a product Usability is the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience. User interface - Hardware and Software interfaces From machine to user User interface - Hardware and Software interfaces Make a program that 1. works From machine to user User interface - Hardware and Software interfaces Make a program that 1. works 2. runs fast From machine to user User interface - Hardware and Software interfaces 1977 Make a program that 1. works 2. runs fast User interface - Hardware and Software interfaces 1977 Make a program that 1. works 2. runs fast 3. addresses user’s needs User-Centred Design  User interface - Hardware and Software interfaces 1977 Make computer programs easier to use. Rob Kling Researcher in CS User-Centred Design a new philosophy to design programs The book proposes a framework to allow a user-centred approach to design.  User interface - Hardware and Software interfaces 1977 Make computer programs easier to use. Rob Kling Researcher in CS User-Centred Design a new philosophy to design programs The book proposes a framework to allow a user-centred approach to design. products User interface - Hardware and Software interfaces Placing humans at the centre of things is much older that computers and digital technologies, e.g. Many religions and theories (e.g. geocentric model) Humanism in philosophy during the Renaissance around the 16th century Ergonomics in the scientific organisation of work at the end of the 19th century Urban planing in the 20th century… Vitruvian Man (1490) User interface - Hardware and Software interfaces User eXperience User-Centred Design the philosophy UX is the full User-Centred Design the concept experience of the is about designing user with a digital with the users’ product from first needs and expected contact to last. behaviours in mind. UI became part of UX and synonym of visual design User interface - Hardware and Software interfaces User eXperience + User-Centred Design UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) User interface - Hardware and Software interfaces User eXperience + User-Centred Design The 2 components of a successful design! To make sure that a product is more than just good code and clear graphics. UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) User interface - Hardware and Software interfaces User eXperience + User-Centred Design The 2 components of a successful design! “Instead of forcing users to adapt to the design of a product or experience, we can use some key principles from psychology as a guide for designing in a way that is adapted to people.” Jon Yablonski, laws of UX UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…)  Today’s class A brief history of UI/UX Guidelines UX design Sound technology. Poor design. Coffeepot for masochists (1969) Jacques Carelman bad UX  Bad UX can be inefficient New SMRT train display Japanese train display How do you compare these two train displays? UX - the full experience (e.g. efficiency, adequacy, error handling…) Source: techinasia UI - the visual design (e.g. colours, typography, overall aesthetic…)  Bad UX can be inefficient New SMRT train display Japanese train display Words faded in and out for no reason All information displayed at once English only Use of universal icons No indication of your location. Location easily seen UX - the full experience (e.g. efficiency, adequacy, error handling…) Source: techinasia UI - the visual design (e.g. colours, typography, overall aesthetic…)  Bad UX can be inefficient pre-2017 SMRT static display Which line are you on? Where are you heading? How far is your stop? Does one need a geographically accurate representation of the line? 2017 SMRT dynamic display UX - the full experience (e.g. efficiency, adequacy, error handling…) Source: techinasia UI - the visual design (e.g. colours, typography, overall aesthetic…)  Bad UX can be inefficient pre-2017 SMRT static display Which line are you on? Where are you heading? How far is your stop? Does the photo of a landmark convey useful information? 2017 SMRT dynamic display UX - the full experience (e.g. efficiency, adequacy, error handling…) Source: techinasia UI - the visual design (e.g. colours, typography, overall aesthetic…)  Bad UX can be dangerous Partial nuclear meltdown at power plant on Three Mile Island, Pennsylvania (1979) Caused by a valve left open, allowing large amounts of coolant to leak Status light of the valve on control panel was green, so valve seemed not having problem. In reality, green only meant that the valve was powered, not that it was open or closed. UX - the full experience (e.g. efficiency, adequacy, error handling…) Sources: Medium , uxstudio UI - the visual design (e.g. colours, typography, overall aesthetic…) Class Activity - Critiquing UI-UX of websites 1/2 Work in pairs - 20 minutes Deliverable: A list of guiding principles for UX and UI Find two websites (or apps) solving the very same problem. List the similarities and differences of their respective UI/UX. List the pain points. Propose guiding principles for good UI/UX UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) UX guidelines  d U X f o r goo i p l e s prin c i d i ng w g u A fe om/ ux.c ://la wsof https Principle #1 - Jakob’s principle W eb si t What research has shown ei nt er Users prefer your site (or product) to work the same way as all the other fac sites (or products) they spend time on and they already know. e Users develop expectations of design conventions (aka mental models) based on experience from other websites Users leave when UI does not match their expectations Takeaway Source: Laws of UX Principle #1 - Jakob’s principle W eb si t What research has shown ei nt er Users prefer your site (or product) to work the same way as all the other fac sites (or products) they spend time on and they already know. e Users develop expectations of design conventions (aka mental models) based on experience from other websites Users leave when UI does not match their expectations Takeaway Designers should follow common design conventions. Conventions enable user to focus on the website’s message instead of figuring out how it works Source: Laws of UX Moving away from Skeuomorphism but the basic layout remains since the intended function is unchanged. Principle #2 - Fitt’s principle Ta rge ta cq u i si What research has shown tio n The time to acquire a target is a function of the distance to and size of the target. Takeaway Source: Laws of UX Principle #2 - Fitt’s principle Ta rge ta cq u i si What research has shown tio n The time to acquire a target is a function of the distance to and size of the target. Takeaway Place typically used buttons near user’s typical cursor position Place less typically targeted buttons further away from user’s typical cursor position (to prevent users from ‘successfully’ clicking the wrong button before realising the mistake) Source: Laws of UX Source: NUS Library, 2024 The touch target area is made larger to include even the label. The ‘Submit’ button is conveniently located next to the last form input. The user is likely to press ‘Start Over’ by accident after filling in Source: NUS Library, 2024 the book title to be searched for.  W Principle #3 - Miller’s principle or kin g me What research has shown mo Young adults can hold only about 7 items (chunks of information) in their r y working (short-term) memory The amount of mental effort required to work with an interface is called its cognitive load. When cognitive load exceeds our working memory, users lose critical information and feel frustrated, leading to negative user experience. Takeaway Source: Laws of UX  W Principle #3 - Miller’s principle or kin g me What research has shown mo Young adults can hold only about 7 items (chunks of information) in their r y working (short-term) memory The amount of mental effort required to work with an interface is called its cognitive load. When cognitive load exceeds our working memory, users lose critical information and feel frustrated, leading to negative user experience. Takeaway Organise information into smaller chunks to help users process and memorise Source: Laws of UX  within the same space, thus creating a relationship among the grouped items and differentiating them from other groupings. This is especially true for tool- bars in editing programs like Google Docs (Figure 3-7), which utilizes chunking to separate functionality within the toolbar into discernible groups. Figure 3-4. “Wall of text” improved with hierarchy, formatting, and appropriate line lengths (source: Wikipedia, 2019) MILLER’S LAW | 35 Now let’s take a look at how chunking 65086536 6508 6536 is applied in a broader context. Chunking can be used to help users understand underlying relationships by While chunking is incredibly useful for bringing order to information-dense grouping content into distinctive modules, applying rules to separate content, experiences, it can be found in many other places as well. Take, for example, and providing hierarchy (Figure 3-5). Especially in an information-denseFigure 3-7. Google experi- Docs utilizes chunking to separate functions into discernible groups ecommerce websites such as Nike.com (Figure 3-6), which uses chunking to ence, chunking can be Chunking using structure leveraged to provide spacesto the content. Not only is group information Chunking (source: using Google related to Docs, each dividing line elements might 2023)While individual product. the result more visually pleasing, but it’s also more scannable. Users who are not share a background or surrounding border, they are visually chunked by their proximity to one another (product image, title, price, type of product, and skimming the latest headlines to determine which is worthy of their attention finally total colors available). Additionally, Nike.com leverages chunking to group can quickly scan the page and make a decision. related filters in the lefthand sidebar. Figure 3-5. Example of chunking applied to dense information (source: Bloomberg, 2023) Figure 3-6. Chunking is commonly used to group products and filters on ecommerce websites Chunking using alignment Chunking using proximity (source: Nike.com, 2023) Chunking can also be used to group related actions or functions together within the same space, thus creating a relationship among the grouped items  Co Principle #4 - Hick’s principle mp lex ity o fc ho What research has shown ice The time required for a decision to be made increases with the number and complexity of choices available. The more options are present, the longer a user will take to interact with the UI. Takeaway Source: Laws of UX  Co Principle #4 - Hick’s principle mp lex ity o fc ho What research has shown ice The time required for a decision to be made increases with the number and complexity of choices available. The more options are present, the longer a user will take to interact with the UI. Takeaway Avoid overwhelming users with too many choices. Source: Laws of UX  HICK’S LAW | 43 Figure 4-2. Modified TV remotes that simplify the “interface” (sources: Sam Weller via Twitter, 2015 [left]; Luke Hannon via Twitter, 2016 [right]) Figure 4-2. Modified TV remotes that simplify the “interface” Figure 4-3. A smart TV remote, which simplifies the controls to only those absolutely necessary “Grandparent-friendly” TV remotes (source: Apple, 2023) (sources: Sam Weller via Twitter, 2015 [left]; Luke Hannon via Twitter, 2016 [right]) Smart TV remote Source: Twitter, 2015 and 2016 Source: Apple, 2023 Complexity o -loaded to the TV interface ff meaningful task at hand, rather than being overwhelmed with decisions at the Figure 4-5. Screenshot from Notion’s progressive onboarding experience (source: Notion, 2023 outset. Another common example of Hick’s law in action can be found with strea ing services and the choices we’re presented when deciding on what to watc Google - Attempted to reduce time taken to Take, for example, Netflix, which performfound searchthat its customers by showing took options the filtering an average 18 minutes to find a show or movie. The reason for this was they were oft AFTER search paralyzed with indecision when it came Source: to selecting a show Google, 2023 or movie based the quantity of options in front of them. To help remedy this, Netflix introduc various features such as “Trending Now” and “Popular on Netflix” (Figure 4 Figure 4-4. Google simplifies the initial task of searching (left) and provides the ability to filter results only after the search has begun (right)as(source: waysGoogle, to provide 2023) more weight to specific options through the social proof th others have enjoyed them. Let’s look at another example of Hick’s law. Onboarding is a crucial but risky process for new users, and few applications nail it as well as Notion (Fig- ure 4-5). Netflix Notion -helps beginners Attempted learn the to reduce basics of its product by providing an decision easy-to-follow checklist paralysis for getting with labels such started. This is an effective way to onboard as “Trending users because it mimics the way Now” and we actually learn: we often learn best by doing “Popular” and building uponSource: what we already2023 Netflix, know. By providing steps in a risk-free envi- ronment, we can enable new users to start interacting with an app without them eeling overwhelmed by an endless amount of possibilities for getting started. Figure 4-6. Netflix’s “Trending Now” and “Popular on Netflix” sections provide more weight specific options via social proof (source: Netflix, 2023)  Se Principle #5 - Peak-End Rule lec tiv e me What research has shown mo People judge an experience largely based on how they felt at its peak r y and at its end, rather than on the total sum or average of every moment of the user journey. The peak-end rule is an example of a cognitive bias, specifically a memory bias. Takeaway One group of participants placed their hand in cold water (14oC) for 60s. A second group did the same but kept hand in water for an additional 30s, during which time the water was warmed up to 15oC. The second group recalled the experience being less unpleasant, because their memory of it focused on the warmer water at the end. Similar studies have reported similar findings. Source: Laws of UX  Se Principle #5 - Peak-End Rule lec tiv e me What research has shown mo People judge an experience largely based on how they felt at its peak r y and at its end, rather than on the total sum or average of every moment of the user journey. The peak-end rule is an example of a cognitive bias, specifically a memory bias. Takeaway Pay close attention to the most intense points and the final moments of the user journey. One group of participants placed their hand in cold water (14oC) for 60s. A second group did the same but kept hand in water for an additional 30s, during which time the water was warmed up to 15oC. The second group recalled the experience being less unpleasant, because their memory of it focused on the warmer water at the end. Similar studies have reported similar findings. Source: Laws of UX moments represent the accumulation of all the work that goes into learning a new language. Duolingo understands the importance of these moments and goes beyond presenting a simple progress indicator. By infusing a touch of brand character through illustration, subtle animation, and humor, the platform PEAK–END RULE | 71 reinforces achievement and makes the experience more engaging. Figure 6-3. Duolingo gamified features (source: Duolingo, 2023) Figure 6-4. Legendary Level unlock screen (source: Duolingo, 2023) Duolingo - Attempted to enhance positive peaks by celebrating the user’s progress with illustrations and Duolingo’s artful capitalization on key new user momentsThese interfaces. doesn’tareend there.as known With gamification features. TECHNIQUE Legendary Level challenges, users strive to complete timed challenges that make Source: Duolingo, 2023Mapping Journey daily language learning more interesting. If a Legendary Level is successfully OneThese completed, the user is rewarded a new theme in the interface (Figure 6-4). handy tool for identifying the emotional peaks of end users through- out an experience is journey mapping. This qualitative exercise is invalu- details reinforce the feeling of accomplishment and enhance the experience, able for visualizing how people use a product or service through the creating positive mental snapshots for people that use this service. narrative of accomplishing a specific task or goal. Journey mapping results in the creation of a design artifact (Figure 6-5) that not only helps designers and project stakeholders align to a common mental model but making progress toward their goal of getting a ride (goal gradient effect). By focusing on people’s perceptions of time and waiting, Uber was able to reduce its post-request cancellation rate and avoid what could easily become a negative emotional peak while using its service. Figure 6-2. Uber app (source: Uber, 2023) Uber - Attempted to soften the negative peak caused by waiting with 3 concepts: Another* Idleness companyaversion that– users are shown an demonstrates animation ofin proficiency theunderstanding vehicle’s movement how peak * Operational transparency – estimated arrival times are clearly displayed moments impact * Goal gradient effectuser – userexperience is updated onistheDuolingo. Its time, process in real platform provides giving the a fun sense they and are getting effective way to learn a language thatcloser continually is enjoyable and easy to use, while also to their goal Source: Uber, 2023 encouraging users to continue learning. One important way it makes the process of learning a new language engaging is through gamified features such as levels More principles… Aesthetic-Usability Effect: Users perceive aesthetically pleasing design as more usable. Takeaway: Aesthetically pleasing design makes for better UX, but it can also mask actual user issues. Von Restorff Effect: When multiple similar objects are present, the one that differs the most will be remembered. Takeaway: Make important information visually distinctive. Tesler’s law: Every system has a level of irreducible complexity that cannot be simplified. Takeaway: Minimise the user's cognitive load but do not oversimplify. Find balance between simplicity and necessary details. Doherty threshold: Users start to lose interest if they must wait more than half a second for a response. Takeaway: Don’t make the user wait more than half a second. Otherwise, use loading bars and animations to lower perceived waiting. A few guiding principles for good UX Jakob’s principle - Follow common design conventions. Fitt’s principle - Place typically used buttons near user’s typical cursor position. Miller’s principle - Organise information into smaller chunks to help users process and memorise. Hick’s principle - Avoid overwhelming users with too many choices. Peak-End Rule - Pay close attention to the most intense points and the final moments of the user journey. Aesthetic-Usability Effect - Aesthetically pleasing design makes for better UX. Von Restorff Effect - Make important information visually distinctive. Tesler’s law - Find balance between simplicity and necessary details. Doherty threshold - Use loading bars and animations to lower perceived waiting.  Warning 1/2 These guidelines are motivated by scientific research in psychology and cognitive science. These principles are based on our understanding of how humans perceive and interact with the world around them. However, there is no universal agreement on what makes a good UI (good colour, pleasant typography, and overall aesthetic).The appeal of UI is ultimately subjective (due to cultural, individual, and contextual differences). The needs and preferences of the target audience must be kept in mind. Empathy is essential. User interface design, MacMillan Encyclopedia of Cognitive Science (2003)  Warning 2/2 Intentionally moving away from the guidelines Class Activity - Critiquing UI-UX of websites 2/2 Work in pairs - 10 minutes Deliverable: List of principles that were not followed Consider these 3 websites Give your opinion on their UI-UX For each website, suggest the principles that were not followed by the designer Fro each website, suggest why the designer didn’t follow the guidelines UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) Source: lingscars.com  No c lear UX principles not followed: inten ded Miller’s law (no chunking) focu Hick’s law (too many targets) s Aesthetic-usability effect (ugly, so it appears less usable) Von Restorff effect (no use of colors to highlight anything important) Source: lingscars.com Source: dom perignon  No c learly iden tifiab UX principles not followed: le lin Jakob’s law (doesn’t follow convention) ks Fitt’s law (targets are tiny and requires a lot of mouse movement to reach) Von Restorff effect (no use of colors to highlight important things) Source: dom perignon Source: Yale School of Art  No clea r visu UX principles not followed: al h Jakob’s law (they don’t follow convention) iera rch Miller’s law (no chunking) y Aesthetic-usability effect (ugly, so it appears less usable) Von Restorff effect (no use of colors to highlight important things) Source: Yale School of Art  Warning 2/2 Web owners sometimes try to confuse you into clicking on links with a messy UI. (Ling’s cars) Luxury brands are sometimes more interested in projecting or maintaining a certain image than helping you navigate their web page. (Dom Perignon) Web owners might be out to make a rebellious statement by flouting all good UI conventions. (Yale School of Art) UI guidelines  A few guiding principles for good UI Simplicity To ensure clarity Definition of “simple” depends on context and target audience Simplicity = streamlining user’s path to reaching their goal, making it faster, more efficient Good practices: Learn your target audience well, use common conventions, break tasks Avoid nonstandard into smaller steps, don’t overdo it. conventions like this! Source: eleken.co Source: The Design of Everyday Things by Don Norman A few guiding principles for good UI Consistency Ensure that components across different screens are predictable and comprehensible A good practice is persistent navigation- elements that appear on every page typically in a row or column. Facebook’s left-side menu and top navigation bar appear on all pages in FB. Source: NALSengineering A few guiding principles for good UI Control 1. Feedback Show progress bars for surveys, forms, etc Show progress bars in loading screens Give confirmation, eg. “Message sent”, “draft saved” etc. 2. Reversibility Users often make mistakes Buttons to undo and redo changes should be readily found Source: Material Design  Another Gamescomputer book Games some combination of the above. blah blah blah blah blah blah blah blah Nowhere near as important A few guiding principles for good UI blah blah blah blah $19.95 CHAPTER 3 Things that are related logically are ¢ related visually. For instance, you can Books ¢ The more important Computer show Booksthat things are something ¢is,similar Things by grouping the that are related logically Music Books are Visual Hierarchy more prominent One particular them computer ittogether book under is. The most a heading, related important displaying visually. For instance, youMovies Music can Books elements are blah blah blah them larger, blaheither blah blah blah blah in the bolder, same visual a style, in show Very or putting that things important are similar Games Movies by grouping Music Books distinctive blah blah blahcolor, blahthem set off by more white them together $24.95 all in a clearly defined area. under a heading, Games displaying Movies Music The more important Another computera space, or nearer bookthing is, the the top of the page—or them in the sameA visual little less important style, or putting Games Movies some combination of the above. them all in a clearly defined area. Games more prominent it should be. blah blah blah blah blah blah blah blah Nowhere near as important blah blah blah blah $19.95 Things that are related logically should be related visually.¢ Things are “nested” visually to show what’s part of what. For instance, ¢ Things a sitevisually to show are “nested” Computer Books Things that are related logically ¢ are Computer Books section name (“Computer what’sBooks”) part of wouldFor instance, a site Computer what. Books One particular computer Computer book Books Things should bevisually. related nested Forvisually appear instance, above by to you can thegrouping titles of the section Books (“Computer Books”) would One individual name blah blah blah blah particular computer book Computer Computer One particular computer Books Books Booksbook show that things are similar Music Books blah blah blah blah show what them is part ofbooks, together what. under areflecting theappear above fact that heading, displaying the titlesare theMovies books Music of the individual blah blah blah blah blah blah blah blah blahparticular One blah blah blah Music Books $24.95blah computer blah blah blah book books, reflecting the in Games Movies fact that the books are Another blah blah blah blah Movies Music blah blah blah blah partvisual them in the same of thestyle, section. And or putting each book title $24.95blah blah blah blah computer book $24.95 partelements of the section. GamesAnd each book title in blah blah blah blah Games Movies blah blah blah blah them all in a clearly definedspan area.all the $24.95 Colour schemes should differentiate Another computer book turn would that make Another computer book Games turn would span all the elements that make blah blah blah blah blah blah blah blah Another computer book up the description of that book. and highlight elements. up the description of that book. blah blah blah blah blah blah blah blah $19.95 blah blah blah blah blah blah blah blah $19.95 blah blah blah blah blah blah blah blah $19.95blah blah blah blah $19.95 Things are “nested” visually to show ¢ Source: Computer Don't Books make me think by Steve Krug A few guiding principles for good UI Simplicity - Avoid clutter by focusing on essential elements to reduce cognitive load and enhance usability. Consistency - Maintain uniformity in design elements (e.g., colours, fonts, icons) to improve recognition and ease of use. Control - Provide real-time responses to user’s action, for them to immediately understand the consequences of these actions Visual Hierarchy - Arrange the elements of the interface to prioritise and guide the viewer's attention.  Today’s class A brief history of UI/UX Guidelines UX design  https://www.interaction-design.org UX design Let’s introduce Goal: a framework Not to forget any to UX design. aspect of UX UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) User-Centred Design - leading philosophy to create good UX  https://www.interaction-design.org UX design interface or surface layer Let’s introduce Goal: a framework Not to forget any to UX design. aspect of UX UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) User-Centred Design - leading philosophy to create good UX  https://www.interaction-design.org UX design A user’s experience consists Goal: of five separate layers Not to forget any from abstract to concrete aspect of UX UX - the full experience (e.g. efficiency, adequacy, error handling…) UI - the visual design (e.g. colours, typography, overall aesthetic…) Jesse James Garrett, The Elements of User Experience (2002) User-Centred Design - leading philosophy to create good UX  UX design What problem is the product intended to solve and who is the target? Example: For a mobile phone, it is to make life convenient for users who are frequently on the go by allowing calls from anywhere Source Jesse James Garrett, The Elements of User Experience (2002)  UX design What exactly is in the product? Defines what features to build and what written and visual information to include Example: For a mobile phone, what product specifications such as screen size and storage amount to offer, and which apps are included by default? Source Jesse James Garrett, The Elements of User Experience (2002)  UX design What information should be shown to the user and when? How does the user interact with product? Example: For a mobile phone, what should appear on phone screen by default, and which functions should be accessible from the screen or through physical buttons? Source Jesse James Garrett, The Elements of User Experience (2002)  UX design How is the information presented to the user and how does the user navigate through the app? Commonly described using a wireframe Source Jesse James Garrett, The Elements of User Experience (2002)  UX design How does the product look and feel to users? Visual appeal is the primary goal Example: For a mobile phone, are a light mode and dark mode available, and what notification sounds does the interface make? Source Jesse James Garrett, The Elements of User Experience (2002)  Summary UI-UX is a discipline that evolved alongside mainstream computer development and continues to evolve today. Good UI-UX is crucial for successful digital technology. There exist science-based guidelines for good UI-UX. There are different layers involved in the UI-UX design of an app. For next lesson: Please sign up for a free account at figma.com Get full access by verifying your student status at figma.com/education/ Thank you  Learning outcomes Students should be able to: Recognise the importance of user-centric design Identify and explain good and bad design choices from a UX perspective based on, but not necessarily limited to, the principles of UX