Week1 (1).pptx

Week1 Introduction to User INFO 3171 USER INTERFACE Interface & DATA VISUALIZATION WEB DEVELOPMENT AND INTERNET...

Week1 Introduction to User INFO 3171 USER INTERFACE Interface & DATA VISUALIZATION WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  Overview What is UI? Why do we care about UI? UI Design principle Role of UI Designer? UI Design process Communicating through UI Internal  INFO 3171 USER INTERFACE & DATA VISUALIZATION What is UI? WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  What is UI? User Interface - a point where two systems, subjects, organizations, etc. meet and interact - a device or program enabling a user to communicate with a computer. The user interface is what the user sees, and touches, when using a digital service or purchasing a product – including screens and touchscreens, sounds, and light. Internal  Physical part of Human Machine Interface Buttons Touch Screen Speaker Light switches Internal  Computer Interface CLI Command Line Interface Used to run programs, manage computer files and interact with the computer Accepts text input to execute operating system functions. GUI Graphical User Interface GUI Objects: Icons, Cursors, and buttons User friendly and modern Internal  Computer Interface VUI Voice User Interface Speech recognition technology Handsfree, control over devices and apps without having to look at screen Internal  UI vs UX Internal  INFO 3171 USER INTERFACE & DATA VISUALIZATION Why do we care about UI? WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  Poorly Designed User Interface Internal  Exercise1 Remember the letters/words XAIWLDKROQA Cat Mom Pen King Cup hand App Fit Soap Apple Internal  Human & Brain Short-Term Memory People can remember about 7(plus/minus 2) items in short-term memory. The human brain is not optimized for the abstract thinking and data memorization that websites often demand. Internal  Exercise 2 Dual Task Technique 10275937294 583629473192 947352940532 Internal  Human & Brain Working Memory Buffer Human working memory holds information relevant to the current task Reduce the working memory burden by using external memory. When people use websites or other user interfaces, a frequent cause of difficulty is that they forget information from a previous step Internal  HCI – Not only about Human’s brain! Internal  Human Computer Interface A field of science that studies the design and use of computer technology Interfaces between people and computers and how to design, evaluate, and implement interactive computer systems that satisfy the user Understand the factors that determine how people use technology Develop tools and techniques to enable building suitable systems Internal  HCI - Evolution of Technology HCI came along, in the early 1980s, as an attempt to study how and why computers could be made more user-friendly. Internal  Why do we care about UI? Attract and acquire customers Enhance customer retention Lower the cost Customer Satisfaction Successful business Internal  INFO 3171 USER INTERFACE & DATA VISUALIZATION UI Design Principle: Gestalt Theory WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  Gestalt Theory Theory z that checks human perception Max Wertheimer, Wolfgang Kohler, and Kurt Koffka 7 Gestalt UI Principles Internal  Human eye tends to perceive objects that are placed together to be more related than the ones far apart You group related elements together Move items close to each other so they are seen as one unit Implies relationship Creates a path for eye to follow Organize and more likely to be read DO DON’T Separate elements with white spaces Too many separated items on a page Add the headings for related groups Sticking things in corner of the page Create relationship with elements that don’t belong together Not using white spaces or headings to separate Items Internal  Proximity Examples Joe Smith Internal  Human eye tends to complete the missing part Our mind quickly fills the gaps and helps us to find the meaning and intention of a particular thing. Individual perceive objects as being whole when they are not complete. DO DON’T Ensure segmented elements are providing enough context Provide segmented elements too small Let users know that there are still something behind the scene Create illusion of Completeness and encourage their interaction. Internal  Closure Examples Internal  Elements with comparable properties are considered t o be more related than those with different attributes. Size, Shape, and color makes impression of elements. Additionally, typography, shadows, icons, or textures can give the similarity of elements. When users see similar features in the user interface, they classify them as patterns. DO DON’T You can add similar color for the similar elements. Randomly add the colors, shapes or sizes to elements. Apply similar shape to certain elements to indicate that they are Add different styles on the elements with similar functionalities. all the same elements. Use the sizes to a elements according to importance or correct Add same styles for all the elements with different hierarchy pattern. functionalities. Internal  Similarity Examples Internal  In order to determine a relationship between design elements, the human eye follows lines, curves, or a sequence of shapes. How human interpret direction and movement through a composition. Human choose the path of least resistance, perceiving lines as continuing along their established direction DO DON’T Establish Hierarchy Randomly aligning the related items Place related items into vertical or horizontal direction Discontinue linked items or re-direct them at random. Use continuous line Internal  Continuation Examples Internal  Elements that are moving together tend to be perceived as a unified group. Elements seen as having a common destination. Users expect associated elements to move in the same direction, and vice versa. DO DON’T When you add the motion, move related items to same direction Add the random movement to related items. Relate elements with each other even when timings are off The relatedness of elements is powerful when elements have identical speeds, move at the same time, and in the same direction Internal  Common Fate Examples Internal  People instinctively perceive objects as either being in the foreground or the background It shows immediately tell that where you should focus on the content. Area: The mind often perceives the smallest object in the composition as the figure, and the larger as the ground. Convexity: Convex elements are associated with figures more often than concave. DO DON’T Objects are distinguishable from the background Introduce unclear/confusing visual elements Use visual elements contrast, colour, size, position and focus. Over simplify Look at the negative space just as much as the positive space Internal  Figure-ground Examples Internal  Symmetrical elements are perceived as same group. Coherence, Balanced variety in unity. It is necessary to maintain proper order, coordination, and attractive looks. Translational - While repositioning to a new position, one piece maintains its orientation. Reflection – Positive and negative elements are arranged in a composition in two halves that mirror each other, either in a vertical, horizontal, or diagonal axis, to create a mirror effect. Rotation - The elements are symmetrical around a central point and rotate around a common axis. DO DON’T Give visual equilibrium Not giving a breathing room Apply proper gazing direction Not using aesthetic elements such as color or design elements. No surprise that people tend to look for order in objects, Internal  Symmetry Examples Internal  INFO 3171 USER INTERFACE & DATA VISUALIZATION UI Developer’s Role WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  UI vs UX vs Frontend Developer Both UI/UX designers and front-end developers work on the app development and are essential members of the product design team. Internal  UI vs UX vs Frontend Developer UX Developer Front-End Developer Combine research and Developing user-facing design skills features Analysis of the user's Deliver complete product requirements is required. upon specifications Create ideas, designs, and Building reusable code for solutions. the future use Focused on Psychology, and Optimizing webpages user behaviours Programming, algorithms, Site Maps, prototypes, and web architecture, database architecture wireframes involved. Internal  UI vs UX vs Frontend Developer UI Developer Combine technical and design skills Making something looks good and function in a browser. Produce delightful design, and convert it to HTML and CSS Decide how functionality is displayed and users interact with the interface/ Visual Design Interaction Design Information Design Internal  INFO 3171 USER INTERFACE & DATA VISUALIZATION UI Design Process WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  Steps to start UI design 1. Developing the graphical interface of a digital product 2. Deliver Moodboard 3. Document the style guide 4. Prototype design 5. Testing usability of the prototype 6. Improvements and add new features 7. Redesign or updates Internal  INFO 3171 USER INTERFACE & DATA VISUALIZATION Communicating through UI WEB DEVELOPMENT AND INTERNET APPLICATIONS Internal  Communicating through UI User Interface is Communication. Make sure your message is clear. Create the user interface to make users feel comfortable. - Help texts - Assistance UI - Dialog - Error/Warning messages - Graphics Internal  Future UI designs Text based UI Touch Screens Gestures Graphical User Voice Command What’ Next?! Interface Internal