Importance of UX-UI in Android/iOS Development- Stackon
- 1. “People ignore design that ignores people.” — Frank Chimero, Designer and Illustrator STACKON SEMINAR SERIES Kevin Mathew Sunny Interaction Design Principles
- 2. 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. 3 PUNCHED CARDS CLI GUI
- 5. 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
- 6. 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
- 7. 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. MENTAL MODELS
- 8. 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.
- 9. 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.
- 10. 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.
- 11. 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
- 12. 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. 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. 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. 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. 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. 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
- 18. 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!”
- 19. Serial Position Effect The Serial Position Effect is the propensity of a user to best remember the first and last items in a series.
- 20. 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”
- 21. 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.
- 22. 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”
Editor's Notes
- #4: Many of these early computers used punched cards, prepared using keypunch machines, as the primary method of input for computer programs and data. While punched cards have been essentially obsolete in computing since 2012, some voting machines still use a punched card system. The user interface evolved with the introduction of the command line interface, which first appeared as a nearly blank display screen with a line for user input. Users relied on a keyboard and a set of commands to navigate exchanges of information with the computer. This command line interface led to one in which menus (lists of choices written in text) predominated. Finally, the graphical user interface (GUI) arrived, originating mainly in Xerox's Palo Alto Research Center, adopted and enhanced by Apple Computer and effectively standardized by Microsoft in its Windows operating systems. Elements of a GUI include such things as windows, pull-down menus, buttons, scroll bars and icons. With the increasing use of multimedia as part of the GUI, sound, voice, motion video and virtual reality are increasingly becoming the GUI for many applications.
- #6: Simple, Sophisticated and Neat Steve’s obsession with ‘perfect’ design The primary interfaces he created for video games at Atari
- #8: Allow users to predict consequence of actions Communicated through the image of the system
- #10: because behind Coca-Cola, there is a system called VI (Visual Identity System) that guides all of its external image design.
- #11: Middle class is mean/mode Send Information instead of submit
- #13: the system must give the feedback to the user in the form of discoloration, shape change, vibration, light emission, etc. immediately. The purpose is to inform the user that their operation is known by the device.
- #19: This is the main reason why all call-to-actions (CTAs) look different from the rest of the action buttons on a site or application! We want users to be able to differentiate between a simple action button and a CTA, in order for them to have a clear understanding what the CTA does, whilst also remembering it throughout their use of the application or site.
- #20: his is why most applications nowadays ditch the hamburger menu and go for a bottom or top bar navigation, placing the most important user actions to the right or left. In the image above, you can see some examples from popular iOS applications. Each put the “Home” and “Profile” items all the way to the left and right, with serial position effect in mind.
- #21: Cognitive load theory can be differentiated into three types: Intrinsic cognitive load Extraneous cognitive load Germane cognitive load I will touch upon the Intrinsic and Germane types as I think that these are the most applicable to UX design. Intrinsic Cognitive Load Intrinsic cognitive load is the difficulty associated with a specific instructional topic. It’s the main reason micro-copy and copy play a huge role in a good user experience. For example most of the time on applications’ empty states, we prompt users to complete a task. Here, the copy needs to be short, simple and with the appropriate words in order for the user to be able to easily follow the instructions. Germane Cognitive Load Germane cognitive load is the cognitive load devoted to processing information and construction of schemas. The schemas describe a pattern of thought that organises categories of information and any relationships among them. One of the reasons we use design patterns is because they’re something we’re programmed to do by default – so it’s easier for the users to recognise and learn something new if they can discern it into a pattern from something they already understand.
- #22: 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.
- #23: 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.