UX Design Principles, Practices, and Trends PDF

College of Computing and Information Sciences Advanced Diploma Chapter 2 : UX Design Principles, Practices, and Trends © 2023 University of Technology and Applied Sciences Review Freelancer Startup Advertising Agencies Role of UX Engineers Who will supervise the project? Who will define the project’s core goals? User-Centered Design (UCD) Human-centered design is an approach to problem-solving that involves people's perspectives in all steps of the process from problem finding to solution. This typically means going out into the real world to see the problem for yourself. Brainstorming with different perspectives, conceptualizing, prototyping, and develop solutions in the real world and with your User-Centered Design (UCD) In the field of UX, we examine users’ needs with a series of contextual methods known as a User- centered Design (UCD) methodology. This is a framework that enables us to engage with and listen to our users to determine what they want. UCD is a design approach that considers a user’s needs up front and throughout the design and development process, in order to ensure that the final product is well received. Characteristics of User-Centered Design (UCD) Design It starts This is very doesn't with much an assume understan iterative that the ding process. problem people. you are given is the right problem to solve. Universal Design The process of designing products so that they can be used by as many people as possible in as many situations as possible. Universal Design Universal design is a paradigm that has emerged from a general approach designing inclusive environments -- an approach that called for the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized design. UX Design Thinking Ultimately, it’s not the user’s fault if they can’t make a system work; it is our responsibility as designers to get it right for them, and to make it as easy as possible for them to perform the tasks they want to do. Example: OTP reader - case study User-Centered Design (UCD) To reach as many users as possible, you’ll consider questions such as these as part of your user research approach: Do my users have impairments or disabilities to consider–whether temporary, situational, or permanent? How familiar are my users with technology? How my users are accessing the product or service? Where and when are my users accessing the product or service? Seven Principles of Universal Design The 7 Principles of Universal Design were developed in 1997 by a working group of architects, product designers, engineers and environmental design researchers, led by the late Ronald Mace (Design Pioneer, internationally recognized Architect) in North Carolina State University. The design is useful and 01 Equitable Use marketable to people with diverse abilities. The design accommodates a wide 02 Flexibility in Use range of individual preferences and abilities. Seven Principles of Universal Design Use of the design is easy to 03 Simple & Intuitive Use understand, regardless of the user's experience, knowledge, language skills, or current concentration The designlevel.communicates 04 Perceptible Information necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities. The design minimizes hazards 05 Tolerance for Error and the adverse consequences of accidental or unintended actions. Seven Principles of Universal Design The design can be used 06 Low Physical Effort efficiently and comfortably and with a minimum of fatigue. Size & Space for Appropriate size and space is 07 Approach and provided for approach, reach, manipulation, and use regardless Use of user's body size, posture, or mobility. Seven Principles of Universal Design: 1. Equitable Use The design does not disadvantage or stigmatize any group of users. The design should be useful and marketable to people with diverse abilities Provide the same means of use for all users; identical whenever possible; equivalent when not Avoid segregating or stigmatizing any users Make provisions for privacy, security's and safety equally available to all users Make the design appealing to all users Seven Principles of Universal Design: 2. Flexibility in Use The design accommodates a wide range of individual preferences and abilities. Provide choice in methods of use Accommodate right‐ or left‐handed access and use Facilitate the user’s accuracy and precision Provide adaptability to the user’s space Seven Principles of Universal Design: Flexibility in Use Provide customization for dashboards of a system Depending on the users various work tasks and needs, they can select what they want to see on the dashboard and how they want to use it. a website that allows users to choose graphic or text versions Rotating Computer Monitor Screen Rotation option in mobile Seven Principles of Universal Design: Flexibility in Use Is this dashboard customizable? Seven Principles of Universal Design: 3. Simple & Intuitive Use Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level. Keep it simple Consider what the user may be expecting Provide a wide range of literacy and language skills Arrange information reliable with its importance Provide effective prompts and feedback during and after task completion ITIS401 Seven Principles of Universal Design: Simple & Intuitive Use Intuitive use can be achieved by using colours to help understand or providing immediate help Seven Principles of Universal Design: 4. Perceptible Information The design communicates necessary information effectively to the user, regardless of surrounding conditions or the user's sensory abilities. The design is clear to the user of how to use it or behave around it. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information Maximize ‘legibility’ of essential information (make it clear enough to be read by user) Differentiate elements in ways that can be described (i.e. make it easy to give instructions or directions) Provide compatibility with a variety of techniques or devices used by people with sensory limitations. Seven Principles of Universal Design: Perceptible Information Enable users with hearing impairments to watch videos with Video Transcription 20 Seven Principles of Universal Design: 5. Tolerance for Error The design minimizes hazards and the adverse consequences of accidental or unintended actions. Arrange elements to minimize hazards and errors:  most used elements, most accessible;  Hazardous elements eliminated, isolated, or shielded. Provide warnings of hazards and errors. Provide fail–safe feature. Discourage unconscious action in tasks that require vigilance. Seven Principles of Universal Design: Tolerance for Error Seven Principles of Universal Design: 6. Low Physical Effort The design can be used efficiently and comfortably, and with a minimum of fatigue. Allow user to maintain a neutral body position Use reasonable operation forces Minimize repetitive actions Minimize sustained physical effort ITIS401 Seven Principles of Universal Design: 7. Size and Space for Approach and Use Appropriate size and space is provided for approach, reach, manipulation, and use, regardless of the user‘s body size, posture, or mobility. Provide a clear line of sight to important elements for any seated or standing user Make reach to all components comfortable for any seated or standing user Accommodate variations in hand and grip size Provide adequate space for use of assistive devices or personal assistant Seven Principles of Universal Design: Size and Space for Approach and Use Benefits of Universal Design Social Benefits Independent Living Ability as a Range Participation in Society Business Benefits Increased Market Reach Enhanced Customer Satisfaction and Retention Market Crossover Success Positive Public Image Accept at First Use Questions: Oral Recitation: Universal Design 1. Bank Muscat warns users about entering an invalid password. The system will send an error message to customer that he/she have made unsuccessful attempts to login to Internet and Mobile Banking account and entering wrong password on 5th time will lock his/her ID. What principle of Universal Oral Recitation: Universal Design 2. Using mouse for people with upper body disabilities has been a real difficulty for so long a time. In order to help them use computer conveniently as others do, Yanko Design company designed a toe mouse. It is a wireless mouse that adopted the structure of flip-flops, allowing them to operate accurately. Oral Recitation: Universal Design 3. Which of the following is NOT a principle of universal design? A.Sustainability B.Tolerance for error C.Low physical effort D.Equitable use 4. __________ refers to minimizing the impact and damage caused by mistakes or unintended behavior in using the system. A.Tolerance for Error B.Flexibility Oral Recitation: Universal Design 5. In grouping, if things are not logically together, then we should normally physically group them together. A. True B. False 6. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information A. True B. False Oral Recitation: Universal Design 7. Evaluate the principle of Universal Design that enables users to arrange data in a table in any way they choose. A.Equitable Use B.Flexibility in Use C.Simple and Intuitive to Use D.Perceptible Information Oral Recitation: Universal Design 8. Evaluate the principle of Universal Design which describes that users can do a single task in multiple methods. The image below shows an example of this. A. Equitable Use B. Simple and Intuitive to Use C. Flexibility in Use D. Perceptible Information Accessibility, Inclusive Design, and Equity- focused Design When we talk about accessibility, we are talking about how to make a product accessible by people with different abilities. But when we talk about inclusive design, we're looking to difference, to their different experiences and their needs, because of their different capabilities. And gathering these insights, and applying it in a way that it will benefit everyone, whether they have a disability or not. Accessibility, Inclusive Design, and Equity- focused Design Designing and building digital products should begin with inclusive design. Inclusive design is a set of principles that help define responses to issues of diversity and enable products to be developed to address the needs of a broad range of users with different levels of ability. To design for inclusion, we need to recognize exclusion and understand when it happens and why. Exclusion can happen by not recognizing our own biases within our designs. Exclusion happens when we do not think about all the possible ways the product will be used and by whom. Accessibility, Inclusive Design, and Equity- focused Design There's another important factor to being inclusive: equity-focused design. Equity-focused design means thinking through all the aspects of a designed product and making sure the product is both accessible and fair to all races, genders, abilities, age, and socioeconomic status. Also, the designs need to specifically consider underrepresented and excluded groups. Equity-focused Design: Examples 0 Designing Forms 1 0 Avoid Bias on Gender 2 0 Using Inclusive 3 Images 0 Consider Low-end 4 Devices Equity-focused Design 0 Consider Literacy Representation 5 Accessibility Accessibility refers to the degree to which software can be used comfortably by a wide variety of people, including those who require Assistive Technologies (ATs) like screen magnifiers or voice recognition. Accessibility is strongly related to universal design Universal Design: creating products that are usable by people with the widest possible range of abilities, operating within the widest possible range of situations. Accessibility: making things accessible to all people Accessibility Disabilities wheelchair users, people who cannot walk Who needs without aid, Accessibility? people who cannot use their People with special need: fingers or arm, reduced strength, reduced children under 16 years, coordination, people over 65 years, speech impairment, language impairment, and people with dyslexics, disabilities intellectual impairment, hearing impairment and vision impairment Accessibility Accessibility for Abled People Users may be in a situation where their eyes, ears or hands are busy (e.g. driving, loud environments). Hint: Screen Readers; Bluetooth They may find it difficult to read or understand text (Hints: Use simple language; Jargons; Avoid Abbreviations/Acronyms). They may not have or be able to use a mouse or keyboard. (Hints: Shortcut keys; on-screen keyboard) They may have an old or different type of browser or operating system (Hints: Write valid/semantic HTML; HTML5) They may have a slow connection or limited hardware. (Hint: Add h/w). They may not be fluent in the language the document is written Importance of Accessibility Accessibility is the right thing to do Accessibility is the law for many institutions Accessibility offers benefits for all users Accessibility uses innovative technology Accessibility creates market opportunity Accessibility Guidelines Keyboard Object Sound Text Colour Other Access Informati and on Multimedi a Accessibility Guidelines: Keyboard Access To do this (Word) Press Open a document. Ctrl+O Keyboard equivalents. Create a new document. Ctrl+N Provide keyboard equivalents Save the document. Ctrl+S for all actions. Users who are Close the document. Ctrl+W Cut the selected content to the Ctrl+X unable to use the mouse need Clipboard. Copy the selected content to the Ctrl+C all functions to be available via Clipboard. Paste the contents of the Clipboard. Ctrl+V the keyboard. Select all document content. Ctrl+A Apply bold formatting to text. Ctrl+B Example: On-screen Apply italic formatting to text. Ctrl+I Accessibility Guidelines: Object Information Focus Provide a visual focus indicator that moves among interactive objects as the focus changes. This indicator must be programmatically exposed to assistive technology. Assistive technology needs to know the position and contents of the visual focus indicator so it can appropriately convey that information to the user. Accessibility Guidelines: Object Information Accessibility Guidelines: Object Information User Interface Objects Provide semantic information about user interface objects. When an image represents a program element, the information conveyed by the image must also be available in the text. Assistive technology will then be able to convey the identity of the focus object Accessibility Guidelines: Object Information LABELS FORMS Associate labels with When electronic forms controls, objects, icons are used, the form and images. should allow people If an image is used to with assistive identify programmatic technology to access elements, the meaning the information, field of the image must be elements and consistent throughout functionality needed to the application. complete and submit the form, including all directions Hints: Tabbing / Hotkeysand / cues. On-screen keyboard / Input Assistance Accessibility Guidelines: Sound and Multimedia Audio alerts Provide an option to display a visual cue for all audio alerts. Significant audio and video Provide accessible alternatives to significant audio and video. Alternatives are also needed for those with hardware or environmental limitations. Volume Provide an option to adjust the volume. Accessibility Guidelines: Sound and Multimedia Display a visual cue for all audio alerts. Accessibility Guidelines: Sound and Multimedia Accessibility Guidelines: Sound and Multimedia Adjust the volume. Accessibility Guidelines: Text Display text in standard format If text is displayed in a non-standard way, the screen reader will not be able to read the information to the user. Legibility is higher with more open typefaces Verdana Arial Decorative and cursive fonts are also more difficult to read (avoid them!) Accessibility Guidelines: Text User Experience Design Verdana User Experience Design Arial uSER experience DESIGN Algerian User Experience Design Blackadder ITC Accessibility Guidelines: Text Select a font that clearly distinguishes between the numeral 1, capital I and lower case i, and the zero 0 and the capital O. Using both upper and lower case characters are more legible than all uppercase characters. Italic text is difficult to read due to inadequate screen resolution or poor font and underlines also reduce text legibility. It is important to allow for customizable font sizes in an application Accessibility Guidelines: Text Avoid using ALL CAPS. It is suggested to use Sentence Cases because it is easier to read. UPPERCASE MAKES THE EYES TIRED! IT IS SUGGESTED TO AVOID USING BIG CAPS. IN NETIQUETTE, IT MEANS SHOUTING, SCREAMING, AND ANGRY. ALSO, IT HAS A BORING STRUCTURE AS IT LOOKS LIKE A BOX ONLY. Accessibility Guidelines: Text Customizable font sizes Accessibility Guidelines: Color Use colour as an enhancement, not as the only way to convey information or indicate an action. Avoid pale colors and colors that are close in tone. Use white/yellow type on black or a dark color for greater legibility of text. Use no more than five colors when coding information. Adhere to existing color conventions e.g. red for stop. Avoid blue, green and violet for conveying information, since they cause problems for older users. Accessibility Guidelines: Color Examples of use of colors Maximize contrast ratio Accessibility Guidelines: Color Accessibility Guidelines: Others Contrast Support system settings for high contrast for all user interface controls and client area content. Example: High Contrast vs. Low Contrast Animation Provide an option to display animation in a non-animated presentation mode. Example: Distractive Loop; Control Video Blinking Elements Flickering or flashing content can cause discomfort to some people. Example: Not more than 3 times per second [Pokemon] https://www.ww01.net/en/archives/36557 Format Provide documentation in an accessible format such as Accessibility Guidelines: Others Images Use appropriate alternative text for images. Example: Alt text for non-text Skip to main content Provide methods for skipping over navigation links to get to the main content of a page. Example: Add Table of Content; Must know current location Background Patterned backgrounds make text more difficult to read. Example: Watermark; Contrasting colors Justification Left-justified text is easier to read than centered text Accessibility Guidelines: Others Oral Recitation: Accessibility 1. Explain formal definition of Accessibility. 2. “Accessibility is only for disabled people.” A. True B. False 3. If physical keyboard is inaccessible, what should you do? Oral Recitation: Accessibility 4. Which of the following is applied to make the text in a web site accessible? A. Use clear fonts with customizable font size B. Decorate the text C. Style the text with more than five different colors D. Put all the text as images in the web site. Assistive Technologies (ATs) Various assistive technologies that can empower anyone with a disability. Assistive Technology, or AT for short, is used to describe any products, equipment, and systems that enhance learning, working, and daily living for people with disabilities. Assistive Technologies (ATs) Assistive Technology (AT) is any item, piece of equipment, software program, or product system that is used to increase, maintain, or improve the functional capabilities of persons with disabilities. Assistive Technologies (ATs) and Its Importance When you’re designing digital experiences like websites and apps, it’s important to become familiar with the types of assistive technologies (ATs) that people might use to access it. Nearly all devices–especially computers, tablets, and smartphones–on the market today include some type of accessibility support. As a UX designer, it’ll be important to become personally familiar with many types of the ATs so that you can provide easy-to-use and Assistive Technologies (ATs): Examples There are lots of people who don't identify as having a disability but still use assistive technologies. That's because ATs make our lives easier and help provide a better user experience. ATs cover a wide range of devices, like prosthetics, pointing devices, electric wheelchairs, power lifts, eye gaze and head trackers, etc. ATs can also encompass something as low tech as a pencil holder. Not only does a pencil Assistive Technologies (ATs) Specialized hardware and software products that provide essential accessibility to computers for those with significant disability. Select AT products that are compatible with the computer operating system and programs Assistive Technologies (ATs): Examples Screen readers Voice control Alternative text and switch devices Color Speech to text modification Types of Assistive Technologies (ATs): Input Alternate keyboards Scanners & optical character Joysticks recognition Keyboard modifications and Trackballs additions Touch screens Optical pointing devices Voice recognition Processing Pointing and typing aids Types of Assistive Technologies (ATs): Output Programs Output Access utilities: Narrator Braille displays and Reading comprehension embossers programs Monitor additions Writing composition Screen enlargement programs programs Writing enhancement Screen readers tools (i.e. grammar Speech synthesizers checkers) Talking and large print Speech Recognition word processors Types of Assistive Technologies (ATs): Output 72 Types of Assistive Technologies (ATs): Output 73 Types of Assistive Technologies (ATs): Output Assistive Technologies (ATs) Shortcut Keys for some Assistive Technologies Windows logo + +/- Magnify Screen Windows logo + Ctrl + O On-screen Keyboard Windows logo + Ctrl + Enter Narrator Windows logo + H Talking Word Processor URLs for some Assistive Technologies http://www.Sribens.com Grammar-checking http://www.grammarly.com Grammar-checking 75 Oral Recitation: Assistive Technologies 1. Samira wanted to use his device hand-free with less mental stress to type. She wanted to have a voice recording in order to convert her voice to text. What would you recommend her to use? A. Screen reader B. Narrator C. Speech-to-text D. Magnifier Oral Recitation: Assistive Technologies 2. Ahmed is making used of a technology in his mobile phone and webpage. The technology reads out text found on-screen such as visible text and non-text elements such as buttons and alternative text. What technology is described in the scenario? A. Screen Reader B. Narrator C. Magnifier D.Voice Recognition Oral Recitation: Assistive Technologies 3. Give examples of ATs for the following disabled people: Blind Deaf Person with Parkinson’s Disease 4. Khalfan is a student who is visually impaired. He is struggling to use the E-learning to access his course material. Suggest an assistive technology that can help Khalfan in accessing the online material. Oral Recitation: Assistive Technologies 5. What are the shortcut keys (hotkeys) for the following: Magnify screen Narrator On-screen Keyboard Speech Synthesizer (Speech to Text) 6. Give the exact web addresses of: Grammarly Scribens Web Content Accessibility Guidelines Web Content Accessibility Guidelines (WCAG) is created by W3C. It is used for conformance to different platforms, websites, software, applications, multimedia, documents, etc. The Principles of Web Content Accessibility Guidelines (WCAG) are: Perceivable, Operable, Understandable, and Robust. WCAG covers the P-O-U-R principles that focuses on the functional or user-centered accessibility. When the platform or content is built or evaluated with accessibility in mind, developers, designers, or content editors need to think about the P-O-U-R principles so that the users with disabilities must be able to access or interact with the platform following the P-O-U-R Principles with ease. Web Content Accessibility Guidelines Principles: P-O-U-R 1 2 3 4 Perceivable Operable Understand Robust able Web Content Accessibility Guidelines Principles: Perceivable How will content be interpreted or processed 1 by the user? How is the content being presented and how can it be delivered to the user? Will it be text, audio, video, braille or a combination within the presentation layer? Perceivable Organize content to have with meaning (semantic structure). Design with text and create information hierarchies. Content should have the same meaning regardless of presentation and style. Think about designing with text only before applying stylizing. Web Content Accessibility Guidelines Principles: Perceivable How users with disabilities perceive the platforms through their senses such as sight, hearing, and touch? People interact with platforms differently therefore the platform must meet several senses. One example is captioning in videos and transcripts for all users. Those who are deaf or hard of hearing or blind, or have cognitive disabilities can benefit from reading or listening through their senses of sight or hearing. Another example is the responsive design for different platforms from mobile to desktop that meets users' sense of sight or low vision; this allows them to zoom on any devices for enhanced text readability. Sufficient color contrast in text is another example for those with color blindness or low vision. This ensures that they get access Web Content Accessibility Guidelines Principles: Operable What type of input methods are available for the 2 user to use and control? What type of affordances or cues are you giving the user? Using established design patterns, i.e., linking to the homepage via a logo in the header or through an icon of a little house helps Operable reinforce user assumptions about how things should work. Can the user use the back button in the browser? Especially when they have made an error or want to revisit previous content. Online shopping carts often do not allow users the affordance of the back button. Web Content Accessibility Guidelines Principles: Operable Platform requires functionality in order for users to be able to navigate from any input devices such as the mouse, keyboard, touch screen, or voice commands. Users who use the mouse can navigate to any elements in any way on the page, have an easier time than those who do not use the mouse. These users face challenges or difficulties when they depend on the keyboard or voice commands without a mouse to interact with elements such as buttons, form controls, links, etc. Because developers focus on making the website or application functional entirely for the mouse input device. They do not think or consider about other input devices or other types of users. Users using other input devices must be able to navigate or interact in any way like the mouse users by getting into and out of interactive elements with ease. In applying the POUR Principle of Operability, the goal is to ensure that these Web Content Accessibility Guidelines Principles: Understandable Can users derive the meaning of content or how it is 3 used? Semantic structures help organize content, but can the user read and comprehend the content? Is the writing style too formal or full of jargon? Writing should be clear and concise. Understand able This principle is not limited to how the language is utilized, design or functionality that is also applicable to the principle and this can affect users' ability to understand the content or interaction with the platform. How the platform is designed or conveys to users can affect their ability to Web Content Accessibility Guidelines Principles: Understandable The platform needs to be in a consistent and predictable manner as well as usable that will retain users. For instance, we need to think about how we present written content to our users. Most users are diverse in reading levels for different reasons. Some users are second language users while others have issues with literacy. Cognitive disabilities such as autism or attention deficit disorders also play a role in understanding the content. The best approach would be to simplify, keep it concise, and clear. In other words, use simple words instead of complex words and keep sentences or paragraphs Web Content Accessibility Guidelines Principles: Understandable Another example of Understandable principle is the Design. Let's take a look at the login form with an instructive text that says, "Please enter your password" that is placed after the Password form field. When considering the design, the placement of instructions for the forms needs to be logical or optimal. For example, will the users with low vision or visual impairment see the instructions after the form? The answer is no. They use screen readers to render the information in a linear fashion and users often hear the forms first before the instructions and inadvertently miss the instructions. An error can occur, and it's too late for them to correct it after submission or they are forced to go back and figure it Web Content Accessibility Guidelines Principles: Understandable There are different ways of making the instructive text more accessible. One of the solutions would be to move up the instructive text before the Password form field, so that the screen reader will render the text first before the form. Web Content Accessibility Guidelines Principles: Robust Access to content is supported by a broad range of technologies and methods. How backward 4 compatible is your code base? Are you using up-to- date technologies that are not supported by older browsers? The end goal is to have the solution be technology agnostic and ubiquitous. Robust Websites, software, and multimedia, needs to be marked up accurately or standardized. It has to be valid markup in order to work well with the different browsers, operating systems, plugins, or assistive technologies. When the Web Content Accessibility Guidelines Principles: Robust For example, some of the assistive technologies like screen readers such as JAWS, Keyboard only such as No Mouse Use, and voice commands, such as Dragon NaturallySpeaking must be able to work with websites, video players, or software effectively when they are coded correctly. In turn, they become more accessible and usable for user interaction. Oral Recitation: Web Content Accessibility Guidelines 1. According to Web Content Accessibility Guidelines (WCAG), this technique assigns a caption to a non-text element so that assistive technologies can recognize it or if there is loading issue then the caption appears, such as shown in the image below. A.Hypertext B.Hourglass C.Alternative text D.P-O-U-R Oral Recitation: Web Content Accessibility Guidelines 2. According to Web Content Accessibility Guidelines (WCAG), this technique distinguishes the contents from its background color so users can visualize it precisely, especially those with vision A.Contrast impairment. B.CAPTCHA C.Tabbing D.Input Modalities Oral Recitation: Web Content Accessibility Guidelines 3. Identify the alternative for an Audio element of the website? A. CAPTCHA B. Audio Transcript C. Recorded Video D. Scroll Bars 4. Identify which is not a facility for navigation in a system or website? A. Internet site map B. Table of Contents C. Links and Menus D. Scroll Bars Oral Recitation: Web Content Accessibility Guidelines 5. Analyze which of the following is not true about audio in a user interface. A. Audio should always be adjusted. B. Audio background should be 20 decibels quieter than the speech. C. Audio should have an alternative, such as visual cue. D. Audio alternative is designed for deaf users. Oral Recitation: Web Content Accessibility Guidelines 6. “An error message in a user interface can be flashing. However, it could create physical reactions among users.” Recommend how many times a flashing or flickering should be applied within a second? A. More than 3 times per second B. Not more than 3 times per second C. As many as possible D. More than 5 times per second Oral Recitation: Web Content Accessibility Guidelines 7. What is WCAG? Which organization developed the WCAG? 8. What are the four (4) main principles mentioned in WCAG? 9. What are the alternatives of Video and Audio in website design? 10. Explain CONTRAST in background and CONTRAST in Web Accessibility Tools Readability Test Tool https://www.webfx.com/tools/read-able/ WAVE https://wave.webaim.org/ Color Contrast Analyzer Exampl https://www.tpgi.com/color-contrast-checker/# es Broken Link Checker Tool Webpage Performance Test Tool Web Accessibility Tools: WAVE Web Accessibility Tool ( https://wave.webaim.org) Designing Cross-platform Experiences When designing a new product or feature, it’s important to think about the different types of platforms that the design will be experienced on. A platform is the medium that users experience your product on. Some common platforms are: Desktop computers, Laptop computers, Mobile phones, Tablets, Wearables like smart watches, TVs, and Smart displays. Considerations When Designing Cross-platform Experiences Screen Size Functionality Interaction Considerations Access to the Internet Content Layout Reduce Load Time Considerations When Designing Cross-platform Experiences: Screen Size 1.Screen size The first consideration when designing for various platforms is adjusting design elements and features to fit different screen sizes. For example, you have a lot of screen space when you design for desktop and laptop computers. But when you design for smaller screens, like mobile phones, you have to carefully decide which parts of the design you'll prioritize including in the limited space. This means making every word, icon, and image count! Considerations When Designing Cross-platform Experiences: Interaction 2. Interaction In addition to the size of the screen, you also need to consider the way users interact with each platform and how those interactions might affect your design decisions. It’s also critical to consider accessibility when developing your designs at each point. Different groups of people will interact with your product in different ways, like using a screen reader, closed captioning, or a switch device. Considerations When Designing Cross-platform Experiences: Content Layout 3. Content layout In the world of UX design, layouts refer to the way that information is organized on the screen. For example, when designing for desktop or laptop computers, you have the advantage of working with a familiar, standardized size: landscape (horizontal) mode. The screen is wide, content can be laid out in columns, and there’s much more flexibility to design. In contrast, mobile phone content is usually laid out in portrait (vertical) mode, which is ideal for scrolling. In addition, mobile phones often allow users the option to use landscape (horizontal) Considerations When Designing Cross-platform Experiences: Content Layout Consider the layout of content on a couple more platforms: tablets combine both the desktop and mobile phone user experience, which means you can incorporate aspects of desktop and mobile phone content layouts in your designs. Smartwatches tend to have compact square or rectangular screens, offering very little digital real estate to lay out content. Considerations When Designing Cross-platform Experiences: Functionality 4. Functionality There are a lot of reasons why users might choose one platform over another, but functionality and the kind of tasks they want to complete is a huge driver. Your designs for each platform will likely vary based on how and when you expect users to need the product. A mobile-first design philosophy is related to the practice of progressive enhancement, which is designing for the smallest and most basic version of a product before creating larger, more complex versions. By starting with a small screen size, designers have to choose the most important elements to prioritize on the screen. This approach contrasts with graceful degradation, Considerations When Designing Cross-platform Experiences: Access to the Internet 5. Access to the internet More people than ever are using mobile devices as a primary means of accessing the internet. According to the World Advertising Research Center, by 2025, 72% of all internet users will use smartphones as their only method of accessing the internet. A large portion of these users are the Next Billion Users, who are the people around the world who are starting to use the internet for the first time, often through mobile devices. The content, interactions, and features of products you design need to be accessible for the Next Billion Users, so a mobile-first philosophy is key. The mobile-first philosophy is revolutionizing the way UX designers approach the design process. As you start your UX design career, you need to Considerations When Designing Cross-platform Experiences: Reduce Load Time 6. Reduce load time Mobile-first designs help users quickly access content because fewer elements and features have to load. This is important because mobile phones don’t have as much computer power as desktop computers do. If you design for a larger screen size first, it can be difficult later to incorporate all of the design elements of a complex screen into a smaller one without impacting load time. This is just another reason why a mobile first design philosophy can be useful. Four (4) Cs of Designing for Multiple Platforms To provide a great user experience across devices, keep in mind the four (4) Cs: 1.Consistency. Having a uniform design, so users can expect the design to feel familiar across devices and products 2.Continuity. Providing users with a smooth and uninterrupted experience as they move between devices 3.Context. Designing for the needs of a specific device and the way in which the user will use that device in any given situation Oral Recitation: Designing Cross- platform Experiences 1. Imagine you’re designing an app to help users learn how to effectively manage their money. It features short and straightforward articles, tools, and reminders. Since the app is intended for those on-the- go, which design philosophy should you consider? A. Mobile-first design B. Sequential model C. Matrix model D. Graceful degradation Oral Recitation: Designing Cross- platform Experiences 2. Regardless of current trends, the most important things a designer should consider are the users and the context of their needs. A. True B. False Oral Recitation: Designing Cross- platform Experiences 3. You design a product for users based in emerging international markets and want to use the mobile-first approach. What is an advantage for using this approach? A. It allows you to start with a desktop version and then adapt it to smaller screens. B. It allows you to scale back your design at a later time. Oral Recitation: Designing Cross- platform Experiences 4. In graceful degradation, you design from the largest screens to the smallest screens. However, in progressive enhancement you design _______________. A. from the most complex version to the most basic version B. from the top to the bottom C. from the smallest screen to the largest screen D.from the least expensive product to the most expensive product Oral Recitation: Designing Cross- platform Experiences 5. Imagine you are designing a learning tool for young readers for the local public library’s computer lab. Consider the user and identify which design philosophy works best for this tool. A. Graceful degradation B. Mobile-first C. Bottom-up D. Progressive enhancement Oral Recitation: Designing Cross- platform Experiences 6. To design effectively across platforms, identify a few key ideas a designer should be mindful of. Select all that apply. A.Device materials B.Content layout C.Input methods D.Context of use Oral Recitation: Four (4) Cs of Designing for Multiple Platforms 7. Darar is creating a mobile version of a large company’s recently announced desktop application and wants to keep the brand familiar across platforms. Which of the four Cs does this adhere to? A.Context B.Consistency C.Complementary Best and Next UX Practices (Source: Forrester Research, Inc.) Forrester is a research and advisory company that offers a variety of services including research, consulting, and events. Forrester spoke with dozens of leading experts in design, usability, ethnographic research, design process, and software development, including both academics and practitioners. Their efforts uncovered four (4) best UX practices: 1.Become your users to know how to design for them 2.Design first to avoid leaving user experience to chance 3.Trust no one — test to make certain your users are happy 4.Inject user experience design into your software Best and Next UX Practices (Source: Forrester Research, Inc.) Best How to Pitfalls Practice Become Listen to their Don't Assume that your users needs. developers already Observe them in understand the user their natural Don’t just listen; habitat. observe. Create personas. Don’t confuse Empathize with business stakeholders them. with users. Don’t confuse Best and Next UX Practices (Source: Forrester Research, Inc.) Best How to Pitfalls Practice Design Serve business goals Don’t forget to first by design serving user goals. for all aspects of Find and grow design the talent. user experience. Design for change. Don’t think tools Know your can constraints. design for you. Design for Don’t ignore the diﬀerences. user Borrow inspiration research. Best and Next UX Practices (Source: Forrester Research, Inc.) Best How to Pitfalls Practice Trust no Settle Don’t just test for one — test irreconcilable usability. diﬀerences Don’t forget to test through for testing. reliability. Take a shortcut Don’t forget to test with for expert reviews. security. Test continuously. Best and Next UX Practices (Source: Forrester Research, Inc.) Best How to Pitfalls Practice Inject user Educate everyone on the Don’t make experience team user design about what UX is and experience into your why it is design software important. prohibitively developm Find a leader who will expensive. ent life elevate Don’t just cycle and drive UX design. throw (SDLC) Prioritize initial eﬀorts on design over projects where you can the make a big impact. wall. Best and Next UX Practices (Source: Forrester Research, Inc.) Next practices Use immersive development methodology. Empower designers and even end users to help you develop. © 2023 University of Technology and Applied Sciences.

UX Design Principles, Practices, and Trends PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue