“People ignore design that ignores people.” — Frank Chimero, Designer and Illustrator STACKON SEMINAR SERIES Kevin Mathew Sunny Interaction Design Principles

2 USER INTERFACE /ˈjuːzə(r) ˌɪntə(r)ˈfeɪs/ the means by which the user and a computer system interact, in particular the use of input devices and software.

3 PUNCHED CARDS CLI GUI

AUGMENTED REALITY

5 “Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think the design is. It’s not just what it looks like and feels like. The design is how it works.” STEVE JOBS

Create the content and functions of products that are useful, easy to use, user-friendly, technically feasible, and of commercial interest. Basic Interaction Design Principles IxD

CONSISTEN T MEANINGF UL SENSIBLE MAKE THINGS VISIBLE Relations between users intentions, required actions and results. REMIND The user of what can be done and how to do it. The designer should be aware of the users mental model. Most of users are operating the interface just based on their instinct. In short, when they encounter a button, they will think this button will be triggered to meet their needs. But if this button get triggered in some other operation rather than user's expectation, it must be a bad design.operating MENTAL MODELS

The most basic principle of interaction design is to meet the user's needs. To determine the user’s requirements is a product manager's basic work, there are many ways and tools to help us identify the user's needs. For examples, observing user behavior, analyzing data, building user scenarios, and more. MEET THE USERS NEEDS When creating user experiences, its not so much about doing what users expect. Instead, its about creating a design that clearly meets their needs at the instant they need it.

CONSISTENCY It requires that within the same or familiar functions and scenes, to use the consistent performance, operation, and feeling in a (or a category) product.

USE SIMPLE LANGUAGE Users are not a designer or a developer, most of them do not understand the design concept and development process, the language and text of the product must be easy to understand and very close to general user's thoughts. However, we need to think users are busy people instead of not smart people. So we have to optimize some functions for middle-class users.

Correct operating parts must stand out obviously and can convey the correct information to users. Also, the user can operate the interface based on his/her life experience and instinct, no extra learning. INTUTIVE DESIGN

Provide feedback The "communication" between people and machines is essentially the process of information transmission. The process of Information send out and get back will form an effective interaction and mutual understanding. So the timely effective feedback and explanation are particularly important. Allow user making mistakes When the user operates the interface, the mistakes that they made must be allowed. Because this may not user's fault but a design problem. And when the user is making a mistake, it should provide effective information to guide him to the right operation path. We need to avoid the error- prone situation, or check and confirm the options before the actual action prompts to the user..

13 Interaction design is "user-centered design", user experience plays the most important role in it. To grasp some interaction design foundation knowledge is important, but the greatest part is to let the user operate and master the product easily, also, interact with it, establish the basic cognitive ability of the product, so that the product's operating mode can meet the design intent. TAKE-AWAY

14 Keep the interface simple The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging. Create consistency and use common UI elements By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site. Be purposeful in page layout Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.

15 Strategically use color and texture You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage. Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.

16 Make sure that the system communicates what’s happening. Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user. Think about the defaults. By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user. This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out.

17 Psychology plays a big part in a user’s experience with an application. By understanding how our designs are perceived, we can make adjustments so that the apps we create are more effective in achieving the goals of the user. The Psychology Principles Every UI/UX Designer Needs to Know

Von Restorff Effect The Von Restorff effect (also known as the isolation effect) predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered! “When multiple similar objects are present, the one that differs from the rest is most likely to be remembered!”

Serial Position Effect The Serial Position Effect is the propensity of a user to best remember the first and last items in a series.

Cognitive load Cognitive load refers to the total amount of mental effort being used in a person’s working memory. To put it simply, it is the amount of thought you need to exercise in order to complete a specific task. “Cognitive load is the amount of thought you need to exercise in order to complete a specific task. It’s easier for users to learn something new if they can discern it to a pattern from something they understand”

Hick’s Law Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.

Law of Proximity Law of proximity is part of the Gestalt Laws of Perceptual Organization, and it states that objects that are near, or proximate to each other, tend to be grouped together. To put it in simpler terms, our brain can easily associate objects close to each other, better than it does objects that are spaced far apart. This clustering occurs because humans have a natural tendency to organise and group things together. “The Law of Proximity states that objects that are near, or proximate to each other, tend to be grouped together”

THANK YOU QUESTIONS?