User Interface and User Experience Design Basics

1. UI/ UX Design Basics A Classroom Guide ADMEC MULTIMEDIA INSTITUTE® | www.admecindia.co.in | #9811-8181-22

2. UI AND UX UX refers to the term User Experience while UI stands for User Interface. But despite their closeness, there are lot more to their execution process and design discipline.

3. UX design relates to the overall user interaction and experience with an application or a website. It is well known that great user experience results in return customers and great app usage. Typically, the UX Design process include research, design, prototyping, testing and measurement. Lot of factors influence UX process such as usability, utility, accessibility, design/aesthetics, performance, ergonomics, overall human interaction and marketing.

4. On the other hand, User Interface (UI) is more about visual design and informationdesign around screens. Though a lot of process go into this graphical element, UI as the name implies, about the things the user will actually see and interact. It delivers tangible results and focuses on how an app or product surface look and functions.

11. User Interface Design Part I

12. UI Design Basics Section 1

13. Introduction User Interface (UI) Design focuses on: • Anticipating what users might need to do and • Ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from: • Interaction Design • Visual Design and • Information Architecture

14. 1. Interaction Design Interaction design is an important component within the giant umbrella of user experience (UX) design. - Interaction design focuses on creating engaging interfaces with well thought out behaviors. - Understanding how users and technology communicate with each other is fundamental to this field. - With this understanding, you can anticipate how someone might interact with the system, fix problems early, as well as invent new ways of doing things.

15. Best Practices for Designing Interactions Consider these qualities and associated questions when creating digital products that have an interactive element: Questions to Consider when Designing for Interaction • Define How Users Can Interact with the Interface • Give Users Clues about Behavior before Actions are Taken • Anticipate and Mitigate Errors • Consider System Feedback and Response Time • Strategically Think about Each Elements • Simplify for Learnability

18. 2. Visual Design Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the content on the page or function. Instead, it enhances it by engaging users and helping to build trust and interest in the brand.

19. 12 Visual Hierarchy Principles

20. 12 Visual Hierarchy Principles…

21. 12 Visual Hierarchy Principles…

22. 12 Visual Hierarchy Principles…

23. Basic Elements of Visual Design The basic elements that combine to create visual designs include the following: • Lines • Shapes • Color • Texture • Typography • Form

24. Principles for Creating a Visual Design A successful visual design applies the following principles to elements noted above and effectively brings them together in a way that makes sense.  When trying to figure out how to use the basic elements consider: • Unity • Gestalt • Space • Hierarchy • Balance • Contrast • Scale • Dominance • Similarity

25. Example of Putting it all together

26. 3. Information Architecture Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system. Why a Well Thought Out IA Matters The purpose of your IA is to help users understand where they are, what they’ve found, what’s around, and what to expect.

27. 3. Information Architecture Why a Well Thought Out IA Matters The purpose of your IA is to help users understand: • where they are • what they’ve found • what’s around and • what to expect

28. What You Need to Know To be successful, you need a diverse understanding of industry standards for creating, storing, accessing and presenting information. The main components of IA: • Organization Schemes and Structures: How you categorize and structure information • Labeling Systems: How you represent information • Navigation Systems: How users browse or move through information • Search Systems: How users look for information

29. What You Need to Know In order to create these systems of information, you need to understand the interdependent nature of users, content, and context. It is also referred to this as the “information ecology” and visualized it as a venn diagram.  Each circle refers to: • Context: business goals, funding, politics, culture, technology, resources, constraints • Content: content objectives, document and data types, volume, existing structure, governance and ownership • Users: audience, tasks, needs, information-seeking behavior, experience

30. Choosing Interface Elements Interface elements include but are not limited to: • Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows • Containers: accordion Refer please: www.getbootstrap.com

31. Best Practices for Designing an Interface Everything stems from knowing your users including understanding their: • Goals • Skills • Preferences and • Tendencies Once you know about your users, make sure to consider the next points when designing your interface.

32. Best Practices for Designing an Interface… • Keep the interface simple • Create consistency and use common UI elements • Be purposeful in page layout • Strategically use color and texture • Use typography to create hierarchy and clarity • Make sure that the system communicates what’s happening • Think about the defaults

33. 10 User Interface Design Fundamentals 1. Know your user “Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff Bezos

34. Users spend the majority of their time on interfaces other than your own (Facebook, Yahoo, Google etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. 2. Pay attention to patterns

35. 3. Stay consistent “The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson (Usability 101) https://www.nngroup.com/articles/usability-101-introduction-to-usability/

36. 4. Use visual hierarchy “Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen, The Art and Science of Web Design

37. 5. Provide feedback Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.

38. 6. Be forgiving No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs. No one likes to start over because he/she put in the wrong birth date format. Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that user knows how to prevent the error from occurring again.

39. 7. Empower your user Once a user has become experienced with your interface, reward him/her and take off the training wheels. The breakdown of complex tasks into simple steps will become cumbersome and distracting. Providing more abstract ways, like keyboard shortcuts, to accomplish tasks will allow your design to get out of the way.

40. 8. Speak their language “If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters.” – Getting Real

41. 9. Keep it simple “A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär Almqvist https://www.crunchbase.com/person/p%C3%A4r-almqvist

42. 10. Keep moving forward This is a key principle in UI design. It is often said when developing interfaces that you need to fail fast, and iterate often.

43. Law of UI Design Section 2 A CASE STUDY ON MOST POPULAR APPS AND WEBSITES

44. Laws of User Interface Design 1. Law of clarity The user will avoid interface elements without a clear meaning.

45. Laws of User Interface Design… 2. Law of preferred action The user will feel more comfortable when they understand what the preferred action is.

46. Laws of User Interface Design… 3. Law of context The user expects to see interface controls close to the object he wants to control.

47. Laws of User Interface Design… 4. Law of defaults The user will rarely change default settings.

48. Laws of User Interface Design… 5. Law of guided action The user will probably do something if he is asked to do it.

49. Laws of User Interface Design… 6. Law of feedback The user will feel more confident if you provide clear and constant feedback.

50. Laws of User Interface Design… 7. Law of easing The user will be more inclined to perform a complex action if it’s broken down into smaller steps.