HCI - Design 2 Lecture Notes PDF

Lecture 5 User interface design (UX/UI) What is user interface? – It is the space where interaction between user and machines occur – such as computers, home appliances, mobile devices, and other electronic devices. User Interface Design (UX/UI)  Step 1 : Unde...

Lecture 5 User interface design (UX/UI) What is user interface? – It is the space where interaction between user and machines occur – such as computers, home appliances, mobile devices, and other electronic devices. User Interface Design (UX/UI)  Step 1 : Understand the first step is to understand the problem you would solve and the objectives of the organization as well. User experience (UX) focuses on having a deep understanding of users, – what they need, – what they value, – their abilities, – and also their limitations. – It also takes into account the business goals and objectives of the group managing the project.  Understanding the problem A design team could develop an app, a social network platform. The problem statement would guide the team in navigating decisions and features, like, – should we use AI? – What other apps should it link to? – How could the environment be designed? – The framed problem provides a framework for crafting the best solution for the user.  What are the different data gathering techniques? Questionnaires: – Questions can be closed or open, online Data recording: – Notes, – audio, – video, – photographs 3-Task analysis  What is design analysis? Achieving goals within constraints 1. Goals (purpose) What you want to achieve? 2. Constraints – Materials.(Understand your materials) understand computers – limitations, capacities, tools, platforms understand people – psychological, social aspects, human error 3. Trade-offs: – choosing which goals or constraints can be relaxed so that others can be met – to balance one situation/quality against another to get at an acceptable result.  Example 1: Security and usability trade-off.  Example 2: Trade-offs Goals, Constrains and Trade-offs Example 3: Trade-offs Goals, Constrains and Trade-offs  Example 4 space–time tradeoff By compressing an image, you can reduce transmission time/costs at the expense of CPU time to perform the compression and decompression. Depending on the compression method, this may also involve the tradeoff of a loss in image quality. Trade-off analysis  4- sketch (scenarios) Stories for design What is a user Scenario? A user scenario is the fictitious story of a user’s accomplishing an action or goal via a product. User scenario is a detailed description of : – what users do with the product?, why they do it? – Steps order – explore interaction (what happens when? ) – explore knowledge ( what are the users thinking?) PAPER DRAWINGS (LOW-FIDELITY) A Guide to Paper-Sketching  sketching principles (Wireframing) Start from the General Layout: – Sketch the outline of each component in your first interface, and then try to explore a variety of layouts and show basic app structure(what we commonly call a wireframe). Start with the Largest Element: – The key is to start with the largest element, draw the outline of the shapes, before you adding details. wireframes typically do not include any styling, color, or graphics.  Do not use colors. If you would typically use color to distinguish items, instead rely on various gray tones to communicate the differences. Do not use images. Images distract from the task at hand. To indicate where you intend to place an image and its size, you can instead use a rectangular box sized to dimension with an “x” through it.  Basic elements A. Text lines: text lines usually start on the left- hand side with a squiggle and then becomes straight. B. Body of text: by drawing a bunch of text lines together, you can create a body of text in your interface. You can be even more specific about what kind of style you want to create, for example: you can start the lines on the same vertical axis to create a left-aligned or right-aligned text.  Basic elements C. Headings: headings are usually emphasized by bold lines so that it is distinguished from the texts. You can use other forms of representations as long as they can express hierarchy, for example making the headings a larger font, underlining, italicizing, etc. D. Checklist: by adding small bullets on the left side of each text line, you will have a checklist.  Basic elements E. Images: images are usually represented by a rectangle filled in with an “X”. F. Video player: there are a lot of ways to draw a video player. The most common and recognizable way to represent it is to draw a rectangle and put a small right-facing triangle in the middle.  Basic elements G. User profile/avatar: a user profile or avatar icon can be created by drawing a semicircle at the bottom of a larger circle (which represents the body), and adding a smaller circle on top of the semicircle (which represents the head). H. Form field: a form field, is represented by a skinny horizontal rectangle.  Basic elements I. Button: for a button, represent it as a rectangle. You might want it to be a little beveled which you can do by darkening the shadow of the bottom borders to make your button look more 3-dimensional and therefore clickable. J. Search bar: if you put a magnifying glass on the left corner of a form field, you will get a search bar.  Note There is no right or wrong way to sketch out your ideas. Always remember that the quality of your sketch is secondary to the actual ideas you want to convey.  Advantages: – Rapid iteration — It’s easier to discard a paper design that took 5 minutes. – Low cost — Paper is cheap. – Increased creativity — The freedom of pencil and paper fosters experimentation and new ideas. – Team-building — Paper prototyping is a rare opportunity where teams get together in a creative environment. – Documentation — Paper prototypes serve as excellent documentation. Designers can make notes and outline ideas to reference throughout the project. Disadvantages: – No user reactions — With no user feedback, it’s difficult to know whether or not your ideas will work. Even if you test your paper prototypes with participants, the feedback will be limited.  UX vs UI sketch A User Experience (UX) designer focuses on aligning the expectations of the user and the product. UX designers participate in the definition, scoping and discovery of the customers’ needs, UI refers to the screens, buttons, toggles, icons, and other visual elements that you interact with when using a website, app, or other  Exercises Tourist information system You have been asked to design a mobile application for tourist information system. Tourist will be able to search for Tourist places. By using low-level prototyping, sketch a Design of the search screen only, which contains different ways to search like: Search about the places like GPS, Search using Image matching (Take into account the different languages and be easy to use).  Exercise You are asked to re-design the faculty website for helping students chatting with instructor Please sketch the interactive system in two screens. – The first screen for login – and second screen used to chat with instructor