Elegant and Effective Website Design with UI and UX PDF

y Session 1 nl O se U Introduction to tre...

y Session 1 nl O se U Introduction to tre User Interface en DesignC h ec pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 1 of 30 © Aptech Limited  y nl O Learning Objectives se U ▪ Define User Interface (UI) and UI design ▪ List and explain different elements of UI Design tre ▪ Describe the principles of UI Design ▪ Describe the types of UI Design en ▪ Explain the UI Design process ▪ ▪ Define Mobile UI C Describe the models in UI Design h ▪ Explain Color Theory ec ▪ Understand the concepts of Design Thinking Use the best practices in UI Design pt ▪ rA Fo Elegant and Effective Website Design with UI and UX / S01/ 2 of 30 © Aptech Limited  What is User Interface (UI)? y nl O Means by which user and computer interact. se U tre Comprises software and hardware. en UI comprises: C h ec Textual, graphical, and auditory information. Example of a most common UI: Automatic Control sequences. pt Teller Machine (ATM) rA Fo Elegant and Effective Website Design with UI and UX / S01/ 3 of 30 © Aptech Limited  What is User Interface Design (UXD)? y nl O Information Interaction Design Visual Design se Architecture U tre Organizing, Creating engaging structuring, and Aesthetics of a site interfaces en labelling content C h ec ▪ The overall goal of the UXD is to make the user’s experience and pt interaction as simple and efficient as possible. rA Fo Elegant and Effective Website Design with UI and UX / S01/ 4 of 30 © Aptech Limited  Parts of User Interface Design 1-6 y nl O ▪ Fundamental parts of most user interfaces are as follows: se U tre Navigational Input Controls Components en C h ec Informational Containers Components pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 5 of 30 © Aptech Limited  Parts of User Interface Design 2-6 y nl O ▪ Input Controls: se U Element Description tre Button Clicking performs an action. en C Radio button Selects one item from a set. h ec Checkbox Selects one or more options from a set. pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 6 of 30 © Aptech Limited  Parts of User Interface Design 3-6 y nl O Elements Description Select one item at a time; similar to radio buttons, se Dropdown list but more compact. U Dropdown Displays a dropdown list of exclusive items. button tre List box Contains a list of options that user can select. en Text field A basic text control for entering text. C h ec pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 7 of 30 © Aptech Limited  Parts of User Interface Design 4-6 y nl ▪ Navigational Components: O Element Description se Search Field Uses the keyword to return the results. U Breadcrumb Tracks location within programs. tre Pagination Divides content between pages. Tags Find content in the same category. en Icons An intuitive symbol to help users navigate the system. Image Carousel C Allows user to browse and select items. h ec pt rA Fo Image Carousel Elegant and Effective Website Design with UI and UX / S01/ 8 of 30 © Aptech Limited  Parts of User Interface Design 5-6 y nl O ▪ Informational Components: se Elements Description U Tooltip Used in conjunction with a cursor, usually a pointer. tre Notification Update messages. en Progress Bar C Indicates where a user is as they advance through a series of steps in a process. h ec Informs users to take action so that they can move Message Box forward. pt Modal Window A child window that requires users to interact with it rA (pop-up) before it can return to operating the parent application. Fo Elegant and Effective Website Design with UI and UX / S01/ 9 of 30 © Aptech Limited  Parts of User Interface Design 6-6 y nl O ▪ Containers: se Element Description U tre A vertically stacked list of items that Accordion en utilizes show/hide functionality C h ec pt rA Fo Accordion Example Elegant and Effective Website Design with UI and UX / S01/ 10 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 1-7 y nl O ▪ The UI design principles include: se U Structure tre Reusability Simplicity en C h ec Feedback Visibility pt rA Tolerance Fo Elegant and Effective Website Design with UI and UX / S01/ 11 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 2-7 y nl O se ▪ Structure Principle ▪ About overall UI U architecture. tre ▪ Design should be clear: visually, theoretically, en linguistically. ▪ Must provide paths to useful information. C h ec pt Example of a clearly structured UI rA Image Courtesy: https://www.amazon.com Fo Elegant and Effective Website Design with UI and UX / S01/ 12 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 3-7 y nl O se ▪ Simplicity Principle ▪ Simple to learn and simple to U use design. tre ▪ Include only important elements. en ▪ Make common tasks easy. C ▪ Provide shortcuts to longer h procedures. ec pt Example of a simple UI Image Courtesy: http://www.apple.com/ipad/ rA Fo Elegant and Effective Website Design with UI and UX / S01/ 13 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 4-7 y nl O se ▪ Visibility Principle ▪ All tasks must be visible. U ▪ Avoid confusing the user tre with superfluous information. en ▪ Use straight forward interface for easy navigation. C h ec pt Example of a clearly visible UI Image Courtesy: https://www.gmail.com rA Fo Elegant and Effective Website Design with UI and UX / S01/ 14 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 5-7 y nl O se ▪ Feedback Principle U ▪ Inform users what is going on. tre ▪ Display the result of en actions. ▪ Inform users about actions, changes of C h state or condition, and ec errors or exceptions. pt Example of UI displaying feedback rA Image Courtesy: Kickdrop.me Fo Elegant and Effective Website Design with UI and UX / S01/ 15 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 6-7 y nl O se ▪ Tolerance Principle ▪ Design prevents users U from making errors. tre ▪ Allows user to learn how to use the site. en ▪ Informs about errors. C h ec pt Example of a tolerant UI Image Courtesy: https://adaddario16.wordpress.com rA Fo Elegant and Effective Website Design with UI and UX / S01/ 16 of 30 © Aptech Limited  Dialogues/Principles and Attributes of User Interface Design 7-7 y nl O ▪ Reuse Principle ▪ The UI design should se reuse internal and U external components and behaviors to tre maintain consistency with purpose. en C h ec pt Example of a reusable UI rA Image Courtesy: http://www.ebay.in/ Fo Elegant and Effective Website Design with UI and UX / S01/ 17 of 30 © Aptech Limited  Types of User Interfaces 1-4 y nl O se U Command Language- Natural Language Menu-based Interface tre based Interface Interface en Touch Sensitive C Graphical User h Web-based Interface Interface Interface (GUI) ec pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 18 of 30 © Aptech Limited  Types of User Interfaces 2-4 y nl O ▪ Command Language-based Interface: se ▪ User issues commands in text form. U ▪ Example: MS-DOS. tre ▪ Menu-based Interface: en ▪ User accesses command through menu. C ▪ Examples: Cashpoint machines, iPods, mobile phones. h ▪ Natural Language Interface: ec ▪ User speaks to interact with system. pt ▪ Example: Speech recognition software. rA Fo Elegant and Effective Website Design with UI and UX / S01/ 19 of 30 © Aptech Limited  Types of User Interfaces 3-4 y nl O se ▪ Touch Sensitive Interface ▪ Uses touchscreen display as input and output device. U ▪ Examples: Smartphones and POS machines. tre ▪ Web-based Interface en ▪ Accepts input from keyboard and mouse. C ▪ Provides output by generating Web pages transmitted via h Internet. ec ▪ Web pages are viewed using Web browser program. pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 20 of 30 © Aptech Limited  Types of User Interfaces 4-4 y nl O se ▪ Graphical User Interface (GUI) ▪ Accepts input through U keyboard and mouse. tre ▪ Displays output on screen. en ▪ Common elements include: ▪ Window ▪ Menu C h ▪ Icons ec ▪ Pointer/Cursor pt rA Elements of a Graphical User Interface (GUI) Image courtesy: http://infonativesolutions.com/ Fo Elegant and Effective Website Design with UI and UX / S01/ 21 of 30 © Aptech Limited  Processes in User Interface Design 1-3 y nl O se U tre en C h ec pt User Interface Design Process rA Fo Elegant and Effective Website Design with UI and UX / S01/ 22 of 30 © Aptech Limited  Processes in User Interface Design 2-3 y nl O se U Interface Analysis tre en C Interface Design h ec Interface Construction / pt Implementation rA Fo Elegant and Effective Website Design with UI and UX / S01/ 23 of 30 © Aptech Limited  Processes in User Interface Design 3-3 y nl O Fourth Step – Interface Evaluation se U tre en C h ec pt rA Fo Design Evaluation Cycle Elegant and Effective Website Design with UI and UX / S01/ 24 of 30 © Aptech Limited  Models in User Interface Design y nl O se Syntactic and semantic knowledge of User Model U user. tre Developed by user while interacting Mental Model en with system. Design Model C Result of requirements analysis phase. h ec Implementation pt Representation of how a system works. Model rA Fo Elegant and Effective Website Design with UI and UX / S01/ 25 of 30 © Aptech Limited  Principles of Mobile User Interface Design y nl O Creating the Content-First Importance of Avoiding First se Approach Fullscreen Clutter Impression U High- Focusing on Using Color tre Resolution User Psychology Images en Create ⊚ An app must work on a range of devices. C h ⊚ Create flexible user interfaces. ec Designing ⊚ Follow best practices. Optimize Mobile UI Focus pt rA Fo Build Elegant and Effective Website Design with UI and UX / S01/ 26 of 30 © Aptech Limited  Color Theory 1-2 y nl O se Traditional Scientific way to ascertain Color U Theory complementary colors. Red + tre Green + Magenta Green en Modern Mixing colors by Color Theory C adding/subtracting base colors. Yellow + Orange h Purple + Blue ec pt Subtractive When mixing colors, some are rA Theory absorbed and some reflected. Color Combinations Fo Elegant and Effective Website Design with UI and UX / S01/ 27 of 30 © Aptech Limited  Design Thinking 2-2 y nl O se Empathize U tre Test Define en C h ec pt Prototype Ideate rA Fo Design Thinking Model Elegant and Effective Website Design with UI and UX / S01/ 28 of 30 © Aptech Limited  Best Practices in UI Design y nl O se Consistency U Patterns tre Visual Hierarchy en User Control C h ec pt rA Fo Elegant and Effective Website Design with UI and UX / S01/ 29 of 30 © Aptech Limited  Summary y nl O ▪ A user interface is the means by which a user and a computer system interacts. se ▪ The fundamental parts of most user interfaces include Input Controls, Navigational Components, Informational Components, U and Containers. tre ▪ The six important UI design principles are the Structure principle, Simplicity principle, Visibility principle, Feedback principle, en Tolerance principle, and Reusability principle. ▪ The four model types especially important in designing a user C interface are User model, Design model, Mental model, and h Implementation model. ec ▪ Color theory is a scientific way to ascertain which colors complement each other. pt ▪ Design Thinking is a problem-solving or solution-based approach rA that is specific to design problems. Fo Elegant and Effective Website Design with UI and UX / S01/ 30 of 30 © Aptech Limited