UX & UI Design Notes PDF

Preview

Summary

Notes on UI & UX design...

Description

UX & UI UX - Employing tools and techniques which allow us to address the challenges that users face - Use tools such as empathy maps to design products which satisfy wants and needs of the user experience UI - Visual appeal - How can we create interfaces which are intuitive and reduce user burden - Font, layouts, buttons Principles of UI Design 1. Layout UI should be a series of areas on the screen → should be used consistently for different purposes The items should be arranged consistently → like items grouped into area - Areas can be further subdivided - Each area is self contained - Areas should have a natural intuitive flow (left to right, top to bottom) 2. Content Awareness Letting users know where they are and what they are doing at that point in that time - Applies to each screen and sub-area - Include titles on all interfaces - Menus should show where the user is and how they got there (parent page, child page, go back, forward etc.) - Important as users need a clear idea of where they are, where they can go, and what they can accomplish 3. Aesthetics Need to be pleasing to the eye, inviting, and functional - Minimalist designs are generally better - White space is important to provide separation - Acceptable information density is proportional to user expertise - Novice user (50%) - Text design: size, font, use of capitals - Colour and pattern choice: don’t use colours which clash 4. User Experience EASE OF LEARNING - Consider inexperienced users - Relevant to systems with large populations EASE OF USE - Consider expert users (how many clicks to do something they want to do, how easy is it to find the function they want to use) - More important in specialised systems Ease of learning and ease of use are related - They both lead to similar design decisions

-

5. Good ● ●

However, the designer must choose whether they want to better satisfy novices or experts Consistency for making the system simple → minimises user effort Allows users to predict what is going to happen All parts of the system work in the same way Users learn how one portion works and immediately apply it to others Navigation controls Consistent terminology

Minimal User Effort - Interfaces should be designed to minimise the effort needed to accomplish tasks - A common rule is the three clicks rule - Go from main interface to where they want to within three mouse clicks - If you want people to do something, make it easy GUI Design GUI (Graphical User Interface) A type of interface that allows users to interact with electronic devices using images and icons rather than text commands - It is important because users tend to believe that an aesthetically pleasing app is easy to use (people ignore design that ignores people) - This is not always the case e.g. apple maps initial release ●

Always design for user needs and behaviours ○ Security, ease of use, accuracy/reliability, efficiency, does it solve user needs?

GUI Design Basics Layout - header/title - Horizontal menu/ menu toggle - Navigation - Content (main area) - Footer - Sidebars Components Elements which are embedded throughout the layout - Page elements - Labels identify page elements and separate content: keep these short and simple Radio buttons: only one selection allowed, are presented in a group, use default values to make it easier for users (if most users are most likely to choose option A, make the checkboxes option A) - Checkboxes are used when we want users to select more than one option; can get quite cluttered. Make sure they are ordered in some way to increase ease of use

-

-

-

-

-

Combo boxes are used when a large number of options are available e.g. countries or languages. Users click to view the options and can select more than one option - Text fields allow users to input a value. The format must be validated i.e. month, and it is helpful for us to provide users with an example of the required input format - Password fields are used to securely take inputs of a private nature; we should also validate the format for passwords. Good to show last digit of input, especially in a mobile interface Buttons - Button labels indicate an action (from the perspective of system OR user), usually verb oriented e.g. update, view basket. From the perspective of system: “would you like to”, from the perspective of the user: “i would like to” - Button appearance: the state of the button should be reflected in its appearance i.e. not clicked, hovering over, and clicked on → communicates to the user whether the action has been performed Text - Refers to both content and physical appearance - Avoid technical terms and jargon - Short sentences - 1.5 line spacing to avoid test density - Sans serif is easier to read than other fonts Imagery and icons - Be engaging, meaningful → icon should represent what you are trying to communicate with the user - Icons should be consistent to allow users to build familiarity with the UI → ease of learning, and helps users scan Navigation - Shows users where they are and allows them to go back - It is a step by step process → need enough real estate show the process - Harder on mobile interfaces than website interfaces due to smaller screen real estate: important to include all necessary features while leaving screen uncluttered - Hamburger menu especially useful for many options - Tab style menu is good for if there are only a few options for navigation - Wearable interface also poses many problems (smart watches) - Takes advantage of more intuitive features such as swipe and tap finger based planning - Vertical, horizontal, freeform view: Touch input and rotary action - Anchor view: rotary action only

Alerts and error messages - These shouldn’t make users feel stupid: use phrases which are not incriminating phrases or no explanation - Need to let users know what is wrong and give instructions on how to fix - Be human - use simple language and explain in layman’s term

- Try to create personality SUmmary - Don’t ask too much of the user to reduce the cognitive load - Create logical steps Creating Design Prototypes 4 steps to designing a great UI: 1. Requirements 2. Sketch 3. Paper prototype 4. Design prototype with wireframe Note: repeat as necessary Requirements - Listen to stakeholders of the system - Flesh out the goal - Observe or interview users - Research existing products - Create use case descriptions/user story maps (use scenarios - the typical journey which a user would take) Sketch - Pen down how each interface within a journey looks like - Good for representation of concepts - Quick 30s sketches - We are looking for feedback rather than perfection Paper Prototype - Creating rough sketches of interfaces to test and explore design options quickly Design Prototype with Wireframe - Shows basic layout of UI - Translate some initial sketches to a digital representation - Low fidelity sketches - High fidelity wireframes - Technical specs - Annotations for developers - Suggestions - Accessibility - Guidelines - Use note callouts to mark areas with further annotations - Each wireframe typically has an ID number to keep track of wireframes → also helps to plan the user journey Interface Evaluation - Goal is to understand how to improve interface design before the system is complete - Constant feedback from stakeholders - Ideally, interface evaluation is done while the system is being designed and before it

is built - Designs will likely go through many changes after testing - Helps to spot problems early Approaches to UI Evaluation - Heuristic → compare design to known principles and guidelines - Walkthrough evaluation → design team presents prototype to users and explains how it works - Interactive → users work on prototype (more involved walkthrough) - Formal usability testing → used more for functional prototypes, performed in labs with users on a language prototype...