UI UX Design module-1 AU.pptx ui ux design explain

j;hkljzxhccl;kjvhlvkjzCBV

1. UI UX Design Dr.R.Rajasekhar Associate Professor,Dept.of CSE

2. Module-1 Syllabus Introduction & Principles of UI Design What is a user interface: GUI fundamentals, History & importance of UI, Principles such as consistency, feedback, affordances; Basic visual perception ( color , layout) The Essential Guide to UI Design – early chapters on GUI history, principles, layout & color

3. Module-1 Introduction & Principles of UI Design User interface (UI) design creates a product's visual and interactive elements to be aesthetically pleasing and user-friendly, focusing on making the user's interaction simple and efficient.  Key principles include Simplicity, Consistency, Feedback, User Control, Clarity, Accessibility, Visual Hierarchy, and Familiarity, all working to guide users intuitively and ensure their needs are met

4. User interface  ( UI )  design User interface  ( UI )  design  or  user interface engineering  is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.

5. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicate to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. User interfaces are the points of interaction between users and designs

6. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design). User-centered design is typically accomplished through the execution of modern design thinking which involves empathizing with the target audience, defining a problem statement, ideating potential solutions, prototyping wireframes, and testing prototypes in order to refine final interface mockups.

7. Three types of user interfaces Graphical user interfaces (GUIs) Users interact with visual representations on a computer's screen. The desktop is an example of a GUI. Interfaces controlled through voice Users interact with these through their voices. Most smart assistants, such as  Siri on smart phones or Alexa on Amazon devices, use voice control. Interactive interfaces utilizing gestures Users interact with 3D design environments through their bodies, e.g., in virtual reality (VR) games.

8. What is UI Design? UI design focuses on the visual aspects of an interface—the buttons, icons, typography, and overall layout—to create a seamless and enjoyable interaction between the user and the digital product.  It's about balancing visual appeal with functionality to meet user needs effectively. 

9. Key Principles of UI Design 1.  User-Centered Design :  Design should prioritize the user's needs and preferences, making the interface intuitive and efficient for the target audience.  2.  Clarity :  Elements and information should be easy to understand and navigate, ensuring every element has a clear purpose.  3.  Consistency :  Using consistent colors, fonts, layouts, and navigation patterns makes the interface predictable and easier to learn.  4.  User Control :  Users should feel in control, with the ability to undo actions or backtrack, which builds confidence and reduces frustration.  5.  Feedback :  The interface should inform users of what's happening, providing timely visual cues, sounds, or animations to show the result of their actions. 

10. 6.   Simplicity :  Designs should be straightforward and free of unnecessary clutter, allowing users to accomplish their goals without confusion.  7.  Accessibility :  The design must be usable by everyone, including people with disabilities, through features like good color contrast and keyboard navigation.  8.  Visual Hierarchy :  Using elements like size, color, and spacing guides the user's eye to the most important parts of the interface, directing their attention and simplifying navigation.  9.  Familiarity :  Placing expected elements in familiar locations reduces the learning curve and makes the interface quicker to use.  10.  Tolerance :  The design should anticipate user mistakes and provide ea sy ways to recover, making the experience less stressful. 

11. What is a user interface A user interface (UI) is the means through which a person interacts with a digital device, software, or hardware, encompassing all visual, auditory, and tactile elements that enable users to give instructions and receive information from a machine.  Key components include input controls like buttons and text fields, navigational elements such as menus, and informational displays like notifications, all designed to create a user-friendly and intuitive experience.  

12. What a User Interface Does Enables interaction :   It's the point of contact between a human and a machine, allowing users to control and navigate a system.  Provides feedback:   UIs give users information about the system's status and their actions, such as progress bars or visual confirmation when an action is completed.  Facilitates ease of use:   A well-designed UI makes a product's functions clear, easy to understand, and simple to operate.  Enhances user experienc e:   It contributes to the overall feel and visual appeal of a digital product, leading to greater user engagement and satisfaction. 

13. Components of a User Interface Input Controls:   Elements that allow users to input data, such as buttons, text fields, sliders, and checkboxes.  Navigational Components:   Tools that help users move through an application or website, including menus, tabs, drop-downs, and breadcrumbs.  Informational Components:   Visual indicators that convey information, like notifications, progress bars, and status updates.  Containers:   Elements that organize and group content, such as windows, pages, and cards

14. Examples of User Interfaces Graphical User Interfaces (GUIs):   The most common type today, using visual elements like icons and windows for interaction, often controlled by a mouse or touch.  Voice User Interfaces (VUIs):   Found in smart assistants, allowing users to interact with devices using spoken commands.  Gestural Interfaces:   Involve body movements, like swiping on a touch screen or making gestures in virtual reality environments. 

15. Basic visual perception (color, layout)

16. Visual Perception Visual Perception is an important factor that you must understand when designing a User Interface. Before creating a design you have to think about how these processes work to gain a clear view of how to design. Understanding your users who you design for is one of the main steps taken in a design process. This process includes understanding how users see color and perceive different visual aspects.

17. What is Visual Perception? This is the ability of the human brain to make sense of what the eyes can see. When it comes to the User Interface, it can be how the various colors, shapes, and patterns are structured in the interface for the brain to make sense of it. To be a great UX designer, you have to understand how perception works to improve the ability to create effective User Interfaces. The ability to distinguish one element from another and to focus on a particular element is known as ‘Perceptual Segregation’. For this ability, color plays an important role in it.

18. Color Perception The Science:   Light enters the eye and stimulates cones, which are specialized cells for color vision, sensitive to different wavelengths of light (red, green, blue).  Brain Processing:   The brain receives signals from these cones and processes them to create our perception of color, which can also be influenced by surrounding colors (simultaneous contrast) and lighting conditions.  Color Theory:   This concept explores how colors interact and how different color schemes (analogous, monochromatic, complementary) can create specific moods, emotions, and messages

19. Layout Perception Spatial Relationships:   The brain helps us understand the position of objects in space and their relationships to each other.  Visual Hierarchy:   Through elements like size, color, contrast, and placement, designers guide users' attention to important information first, creating a structured and effective presentation of content.  Scanning Patterns:   Our eyes follow natural patterns on a page, such as the F-pattern or Z-pattern, and layout design can align with these patterns to improve information recall and navigation.  Visual Perceptual Skills:   Beyond just color and layout, visual perception includes other skills, such as visual discrimination (distinguishing between images), visual memory (storing and recalling images), and visual closure (recognizing incomplete shapes)

20. The Essential Guide to UI Design – early chapters on GUI history, principles, layout & color

21. What is UI? UI design is a subset of HCI Part of a computer & its software that people can see, hear, understand, etc. Two components: input & output IO devices? 24

22. Is Good Design Important? UI is the most important part of any computer system! Over 50% of code devoted to UI Users’ productivity improved 25 to 40%. A company saved $20 000 ! 25

23. What comprises good design? PEOPLE : How we see, understand, and think INFORMATION : Enhance human acceptance Ease eye & hand movements HARDWARE & SOFTWARE: Capabilities & limitations of HCI 26

24. The Goals of UI Design To make working with a computer EASY PRODUCTIVE ENJOYABLE 27

25. Examples Interface screen of Text Properties Text Editor University Application form (lab #1) 28

26. 29

27. 30

28. 31

29. 32

30. 14 steps Know Your User Understand the Business Function Understand the Principles of Good ID Develop System Menus Select the Proper Kinds of Windows Select the Proper Interaction Devices Choose the Proper Screen-Based Controls 33

31. 14 steps (cont.) 8) Write Clear Text 9) Provide Effective Feedback 10) Provide Effective Accessibility 11) Create Meaningful Graphics 12) Choose the Proper Colors 13) Organize Windows 14) Test 34

32. History of HCI Movements & gestures Spoken language Written language Typewriter Computers: QA, Menu selection, Form fill-in (Speech & handwriting recognition) Introduction of GUI 35

33. What is GUI? Pronounced “gooey” A graphical user interface ( GUI ) is a type of user interface which allows people to interact with electronic devices such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands. (Wikipedia) 36

34. History of HCI (cont) The first GUI program? 1963, Ivan Sutherland, MIT. Sketchpad program. Lines, circles, and points could be drawn on a screen using a light pen. 37

35. History of HCI (cont) The revolutionary device in HCI? 1970s, Xerox’s Palo Alto Research Center, Altus & STAR systems. Mouse (pointing & selecting). 38

36. History of HCI (cont) 1974, Xerox. Today’s mouse. 39

37. History of HCI (cont) Apple or Microsoft? 1984, Apple. Macintosh 1985, Microsoft. Windows 1.0 1987, Apple. Macintosh II. The first color Macintosh. IBM. System Application Architecture and Presentation Manager. Graphics OS replacement for DOS. 1988, NeXT. NeXTStep, 3-d Screen simulation. UNIX-based GUIs. 40

38. The Blossoming of the World Wide Web 1960s, Licklider, MIT. Proposed a global network of computers & moved to DARPA. 1969. ARPANET. 4 major universities. 1974, Bolt, Beranek, & Newman. Telnet. Commercial version of ARPANET. 1970s. TCP/IP. Common language of all Internet computers. 1982. “Internet” 41

39. The Blossoming of the World Wide Web (cont.) 1991, Gopher, University of Minnesota. First really friendly interface. 1989, European Laboratory for Particle Physics. Hypertext protocol. HTML (Hypertext Markup language). 1991, Berners-Lee. World Wide Web. 42

40. Web vs. Internet Global information space in which people can read & write using computers connected to the Internet. The Web is a service that operates over the Internet, just as e-mail operates over the Internet (Wikipedia.org, 2006). 43

41. The Blossoming of the World Wide Web (cont.) The first graphical web browser? 1993, NCSA at Univ. of Illinois. Mosaic. First popular graphics-based hypertext browser. 1994. Netscape Navigator 1995, Microsoft. Internet Explorer 1994. NSF stopped support. W3C formed to promote & develop standards for the Web. 2003, Apple. Safari 1.0 2004. Mozilla Firefox 44

42. Web Browser Market Share Which browser is the most popular (most used) today? W3Counter Net Applications 45

43. A Brief History of Screen Design 1970s, IBM. 3270 cathode ray tube text-based terminal 46

44. 1970s screen 47

45. A Brief History of Screen Design (cont.) 1970s screens Cryptic & unintelligible captions Always had to remember what to type Ambiguous messages Monochromatic, green text on black background 48

46. 1980s screen 49

47. A Brief History of Screen Design (cont.) 1980s Grouping & alignment Clear captions Command list (+ function keys) Instructions had to be inscribed 50

48. 1990s and beyond 51

49. A Brief History of Screen Design (cont.) 1990s and beyond Borders Buttons Menus Different font sizes, styles, colors, etc. List boxes, drop-down combination boxes, etc. Screens modified 52

50. Q/A Think about today’s interfaces. What new features are available? 53

51. HW-0 Write your full Name and Group Student ID (Portal login) Choose one good and one bad website with .kz domain. 54

52. Thank you