Slide3-4 The Design Challenge

The design challenge is the deficit gap between the user abilities and the system capabilities. The goal is to bridge the gap, through inclusive design, that will create the best possible end-user experience. Good design is built upon effective performance, efficient security, and satisfying accessibility. Accessibility is a measurement of productivity, and productivity defines usability. Usability is concerned with user effectiveness, efficiency and satisfaction through multiple means of representation, multiple means of expression, and multiple means of engagement. That is, design must consider the physical and cognitive characteristics of people with a holistic user interface that incorporates vision, audio, and touch, so as to achieve the goal of full inclusion.

You can have brilliant ideas, but if you can not get them across, your ideas won't get you anywhere.
Lee Iacocca, American automotive business legend

Productivity that enables employees to be productive and satisfied.

Inclusion that integrates people, products, and services.

Communications that informs people, builds knowledge, and creates confidence.

Colour Contrast to Improve Visibility: Vision is one of the most commonly relied upon senses for navigating any personal computer or phone, and deteriorating vision is among the most common problems adults develop as they age.

Closed Captions to Communicate Beyond Audio: Hearing, like vision, is one of the most common senses to deteriorate with age, and audible noises are one of the most non-discrete forms of communication. Closed captions are necessary for people with hearing impairments, but text is also a more accurate and sometimes deeper form of communication for some environmental situations.

Keyboard Navigation to Minimize Motor Skill Burden: Basic human movement may deteriorate with age, but motor skills can limit a computer user's accessibility in some environmental situations. Keyboard strokes can be much faster and more accurate than a mouse or trackpad when you are in transit.

The user interface design

The User experience design

The graphic design

The content design

The component design

Integrating Accessibility Throughout Design, by Shawn Henry
UX Collective: 5 ways good design breaks barriers, by Niwal Sheikh
Alexwyrick: The 3 Most Critical Optimizations of Accesible Design
Digital Service Standard alpha | Ontario.ca
City Tech OpenLab: Reading Ease and Accessibility
Gov.UK: How to create content that works well with screen readers

The 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. Users become familiar with some commonly used interface elements that act in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction. UI design typically refers to graphical, voice-controlled, touch gestures, and other user interactions. That is, the goal is to creating an intuitive user experience. UI design is a purely digital practice. It considers all the interactive elements of a product interface (including buttons, icons, spacing, typography, color schemes, and responsive design). So, UI design transfers the brand's strengths to a product's interface, making sure the design is consistent, coherent, and aesthetically pleasing.

User interface design requires a good understanding of the user needs. The dynamic characteristics of a system are described in terms of the dialogue requirements contained in seven principles of part 10 of the ergonomics standard (ISO 9241 standard).

Clarity: The information content is conveyed quickly and accurately.

Discriminability: The displayed information can be distinguished accurately.

Conciseness: Users are not overloaded with extraneous information.

Consistency: A unique design, conformity with user's expectation.

Detectability: The user's attention is directed towards information required.

Legibility: Information is easy to read.

Comprehensibility: The meaning is clearly understandable, unambiguous, interpretable, and recognizable.

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, grids, regions.

User Interface (UI) Design (Wikipedia)
WebDesigner Depot: 10 Essential Rules for UI Design
the ISO 9241 standard

While User Experience (UX) is a conglomeration of tasks focused on optimization of a product for effective and enjoyable use; User Interface (UI) Design is its compliment, the look and feel, the presentation and interactivity of a product. In User Experience (UX) Design, it is vital to minimize users' cognitive loads and decision-making time. UX Design principles represent the accumulated wisdom of researchers and practitioners in design and related fields. When you apply them, you can predict how users will likely react to your design. To apply UX design principles effectively, you need a strong grasp of users' problems and a good understanding of how users will accept your solutions.

Keep users informed of system status with constant feedback.

Set information in a logical, natural order.

Ensure users can easily undo and redo actions.

Maintain consistent standards so users know what to do next without having to learn new toolsets.

Prevent errors if possible; Wherever you cannot do this, warn users before they commit to actions.

Do not make users remember information; Keep options visible.

Make systems flexible so novices and experts can choose to do more or less on them.

Design with aesthetics and minimalism in mind; Do not clutter with unnecessary items.

Provide plain-language error messages to pinpoint problems and likely solutions.

Offer easy-to-search troubleshooting resources, if needed.

A good user experience is one that meets a particular user's needs in the specific context where he or she uses the product. As a UX designer, you should consider the Why, What and How of product use.
The Why involves the users' motivations for adopting a product, whether they relate to a task they wish to perform with it or to values and views which users associate with the ownership and use of the product.
The What addresses the things people can do with a product; it is functionality. That is, your design principles should help your UX designers find ways to improve usability, influence perception, increase appeal, teach users and make effective design decisions in projects.

Meet the users needs: The foremost of all UX design principles is to focus on users throughout the design process. Thus, you need to learn what users are looking for in a design (through user testing and other methods). It is possible that a design may seem brilliant to you, but remember that you are not the user.

Know where you are in the design process: A lot of work goes into the UX design, and the design process can be overwhelming, so knowing your place in the process is significant. Knowing your design phase, and the tools used at each phase, will help you ask the right questions for user research. For instance, there is no point testing the color of a button if you are still figuring out where it should be placed in the design.

Have a clear hierarchy: It is easy to take hierarchy for granted, but it is a UX principle that ensures smooth navigation throughout a design. There are two chief hierarchies that you need to note. First comes the hierarchy that is associated with how content or information is organized throughout the design. For example, when you open a website or app, you will note the navigation bar that includes the main sections. This is the primary hierarchy. When you click or hover over this bar, you will note further sub-categories of content open up, taking you deeper into the app or site. These are the secondary menus.

Keep it consistent: Users expect products to share some similarities with other products they regularly use. This makes it easy for them to become familiar with the new product without any additional learning costs. The more familiar your design is to others, the faster users can learn to use it, which enhances their experience. Such consistency also makes the design process easier for the designers, as they do not have to reinvent the wheel every time they take on a new project.

Understand accessibility: An increasingly important rule from among the UX design basics is designing with accessibility in mind. That is, a designer's responsibility is to make sure that his design is usable for as many people as possible. This means that your design needs to be accessible to people with disabilities as well as those without disabilities.

Context is key: When designing, you need to take into account the user's context. Location is a commonly understood contextual factor. That is, are you designing for someone on the go or for someone sitting at a desk? Many behavioural factors (such as the user's emotional state, the device being used, the influence of other people, and much more) will give you Insight into the user's behavior.

Usability first: UX design is entirely focused on solving the users' problems, which makes usability of the design one of the most crucial user experience design principles. No matter how aesthetically pleasing your work may be, it will not strike a chord with the user unless it is safe and easy to use. Any site that is cluttered is bound to lose visitors. As a designer, your job is to make sure that each icon, button, and snippet of information that is present within the design has a purpose. Concentrate on clarity by bringing only useful features to the user's attention.

Less is more: For UX, the underlying aim of this is simple; Reducing the operational and cognitive costs of the users. In placing value on this, the design's usability and consistency improve. The less-is-more approach emphasizes simplicity as opposed to clutter or over-decoration in design.

The user says I got what I need To give users what they need is the first goal of user experience design. Before using a product, people are mostly concerned about how useful it is and will the product solve their problem. Doing user research is a good way to find out users' demands, but objectively, it is hard to measure users' needs precisely. Thus, collecting users' feedback constantly and make use of data or other materials to follow your users' activities is also a key to meet users' demands.

The user says I did not have to think too much Most users want to achieve the task at hand in a most simple, direct and quick way; Without thinking too deeply. This shows the laziness nature of human beings. But laziness is also an important drive of technology development. As a UX designer, we have no reason to go against it unless we want to make products that are anti-human. So, master the art of user stories and simplify the operations by taking advantage of users' habits.

The user says I really enjoy using it Many products have similar functions, which can all meet the users' needs to some extent. So, when designing video player software, how many seconds should the black screen last to draw the users' attention, but never make them feel impatient? Why some social platforms only allow its users to access more functions after a period of time? Those are all questions that user experience designers should be concern about.

The user says I like the product enough for me to use it for the long term One important reason that Facebook became a huge social platform with over 200 million users is that FaceBook UX designers know the mental & psychological needs of users; people win others attention on Facebook, which they did not get in real life. Helping people to build a strong connection with the external world; enabling them to follow and be followed.

The user says The product is good enough to motivate me to become one of its promoters The inherent property of an excellent design is to mobilize its users. To mobilize your users and make them your promoters is an important user experience goal that good UX designers should set. As we all know, users are the best spokesmen of your products. Companies may seek help from all kinds of resources to promote their products, but none of them is as powerful as users. Building a relationship between the users and potential users, like including a Share Button or a Like Button, will improve attractiveness.

UXDesign: Curated stories on design, user experience, and product design
Lollypop design Blog: 7 UX Design Principles to live by
UX Planet Blog: Principles of UX Design

It is important to understand that User Interface (UI) Design and User Experience (UX) Design do go hand-in-hand; you cannot have one without the other. However, you do not need to possess UI Design skills to be a UX Designer, and vice versa; UX and UI constitute separate roles with separate processes and tasks. The main difference is that the UX Design is all about the overall feel of the experience, while UI Design is all about the product interface functionality.

UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.
Dain Miller, Web Developer

UX design is all about identifying and solving user problems; UI design is all about creating intuitive, aesthetically-pleasing, interactive interfaces.

UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.

UX can apply to any kind of product, service, or experience; UI is specific to digital products and experiences.

The Difference Between UX And UI Design - A Layman's Guide

There are two interrelated factors driving accessible design:

Legibility: Legibility is determined by the specific typographic traits affecting recognition of letters and words. As we read, we identify the overall shapes of familiar words rather than processing individual letters and assembling them into phonetic groups. This allows us to process content much faster. The key typographic factors are shape, scale, and style.

Readability: Readability refers to the clarity and speed with which content can be digested over an expanse of text such as a paragraph or a page. Readability is related to a font's legibility but is also influenced by design and layout decisions. The chief factors determining whether text is readable are dimension, spacing and alignment. The readability of type can be improved by manipulating two key variables
Font point size and width, and
Line length and spacing.

Legibility, Project By Design Regression, In Partnership With Google Fonts, Mary Dyson

The wayfinding process involves a series of decisions by which people moving through an environment can reach their desired destination. Those decisions are guided by architectural features and space planning elements, as well as by recognizable landmarks. They are also supported by signage and other graphic communications and, increasingly, by audible and tactile innovations that assist people with special needs. As people make their way through public buildings and other designed spaces, they have to navigate a complex series of paths and decision points. They should be able to do so easily, getting to and from their destinations without frustration, disorientation or anxiety. They should be able to complete their journeys successfully regardless of any differences in physical or cognitive ability, education or experience.
The challenge is to engage audiences with full sight, and those with partial and complete vision loss. Key design features can include optimization for screen readers, user preference controls, simplified navigation, and ease of information retrieval to support greater accessibility. design techniques like; skip to content, text scaling and, changing contrast modes will enhance the user experience for all people.

Braille Authority of North America: Guidelines and Standards for Tactile Graphics
LightHouse for the Blind and Visually Impaired: Ten things to know about tactile graphics
YouTube: Visual Communication Design Definition
YouTube: BlindSquare, Painting a picture of the world through sound
YouTube: Saher Galt, What do pictures SOUND like?

Content decisions cannot be separated from the context in which the content will be used. That is, direct collaboration between content writers and User Interface designers is encouraged. Content must fit the design where it appears, and conversely User Interface designs must support the content displayed. Content depends on context, and context frames the content experience. Content Design requires all involved to consider how different elements should work together as a system.
Anything online that conveys meaningful information is content, and content that can be clearly understood can be translated into knowledge. The duties of a Content Designer vary, depending upon the projects they are developing. Such as Animator for motion graphics, Writer for textual content, Instructional designer for educational content, and programmer for web and application driven content. The Content Strategy refers to the planning, development, and management of content, written or in other media.

Designing a good website that accommodates a lot of content is a tricky balancing act to pull off. Does one attempt to present the user with all the information in a clean, organized manner, or reveal it bit-by-bit, in an effort to create an engaging breadcrumb trail that tugs the user along the road to enlightenment? Get it wrong, and you risk overwhelming your visitors, who will then leave without retaining any part of what they just read. Get it right, though, and you will have gained a new audience member who not only understands your message, but also might just bring a few friends with them when they return.
Jason Amunwa, User Experience and Web Design Consultant

(CIRA) study: Canadians are spending more time online each year Shopping, interacting with governments, logging onto social networks, reaching out to family and friends, and searching for jobs and soulmates. Discovering user needs is an important step in the Content Design process. Besides finding out who your users are, you have to find out how they behave, and what are their frustrations. What do you need to know to turn their frustration into satisfaction? Content Designers make information easy to find, simple to understand, and accessible to everyone.

Content Design typically refers to the practice of developing front-end website elements. Content Designers select the right elements and organize them in an attractive and cohesive way in order to attract visitors. Web Content Designers utilize graphic arts concepts such as colour, size and space to design appealing and functional web pages. Content Designers are often involved in online marketing, and usually focus on animated graphics, texts, videos, and sound depending on the message and the target audience. Content Design tasks are accomplished by using a variety of methods, including content management systems, marketing strategies and Internet programming languages such as HTML, CSS, ARIA and JavaScript.

Purpose

Context

Accessibility

Clarity

Brevity

Relevance

Flexibility

The most important part of the Content Design process is the Discovery Phase. The Discovery Phase is all about doing thorough research into the assignment you have been given or the problem you are trying to solve. It is a journey into the minds of users to figure out their wants and needs. The Discovery Phase helps you to understand:

Who your audience is

What the user wants and needs

What language the user uses

Which channel the user uses

What the organization thinks it wants

What the organization really needs

How and what to prioritize

What you should communicate; When and where

Text: Different types of document formats

Graphics: Static, Animated, and tactile

Audio/Video: Sounds and pictures

Page layout: Visual, auditory, and logical

Components are interactive building blocks for creating a user interface and beatiful products for a good user experience. Accessibility in design allows users of diverse abilities to navigate, understand, and use the product User Interface effectively. A web page Component can be anything that the user interacts with; like Menus, Calendars, video players, and shopping carts. The design must also consider the physical components; Like keyboard, mouse, video display, microphone, camera, and much more. Usability describes the quality of the user experience across the entire website. So, there is an implied essential partnership between the system components (operating platform, applications, assistive technology, and user knowledge), and project responsibility roles (Project management, Development, Architecture, Design, Content management, and testing), That must interact effectively for a good User experience.

Authoring Tools: Authoring tools are software and services that authors (web developers, designers, writers and others) use to produce web content. Although a web page may conform to the specified accessibility standard, it may not necessarily be usable by an assistive technology user. The web page development techniques used to create the dynamic structure and device interaction behaviour, will determine how usable the web page content is to an assistive technology user. to create an accessible Rich Internet Application developers and content managers must understand the interoperability of assistive technologies. Dynamic page rendering and operable functionality must be thoroughly tested before usability testing begins. Screen readers use shortcut keys to navigate around web pages, but in every case they rely on the web page code being in place to support them. So it is important to use elements to convey semantic document structure and to use them according to specification.

Evaluation Tools: Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines. That is, they automatically evaluate a web page structure according to a specified accessibility standard. Screen readers, browsers and other user agents like video players, that adhere to the specified standard will result in a good user experience. However, the specified standard must be accepted and adopted by all user agent developers, to make the web page evaluation tool results meaningful.

User Agent Tools: Everyone that is browsing the web has a user agent. This is the software that acts as the bridge between the user and the internet. When your browser loads a web page, it identifies itself as an agent when it retrieves the content you have requested, and the browser sends a host of information about the device and network that you are on. This is a set of data that allows web developers to customize the web experience. That is, the browser must understand the Application Protocol Interface (API) building blocks and command structure of the web page, so as to display meaningful information on the user device and allow the user to interact with the page elements. Screen readers are a form of assistive technology (AT) potentially useful to people who are blind, visually impaired, illiterate or learning disabled. Thus, the screen reader must understand the API structure of the browser, so as to present the web page information in a meaningful synthesized speech or braille output format. The benefit in coding for the screen reader user agent API, is that you are at the same time coding for search engine optimization and small screen smart devices.

Authoring Tools To produce web content, static web pages, dynamic web applications.
Evaluation Tools for Automated HTML checkers, colour checkers, conformance checkers, and user agents for manual testing.
User Tools for Web browsers, media players, and assistive technologies.
Web Accessibility Initiative (WAI): Essential Components of Web Accessibility

Web pages created according to the principles of progressive enhancement are by their nature more accessible, because the strategy demands that basic content always be available, not obstructed by commonly unsupported or easily disabled scripting. Additionally, the sparse markup principle makes it easier for tools that read content aloud to find that content. Improved results with respect to search engine optimization (SEO) is another side effect of a progressive enhancement-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with progressive enhancement methods avoid problems that may hinder search engine indexing.
The Progressive enhancement strategy is an evolution of a previous web design strategy known as graceful degradation, wherein designers would create Web pages for the latest browsers that would also work well in older versions of browser software. Graceful degradation was supposed to allow the page to "degrade", or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software.
In progressive enhancement a basic HTML markup document is created, geared towards the lowest common denominator of browser software functionality, and then the designer adds in functionality or enhancements to the presentation and behavior of the page, using modern technologies such as Cascading Style Sheets, Scalable Vector Graphics (SVG), or JavaScript. All such enhancements are externally linked, preventing data unusable by certain browsers from being unnecessarily downloaded.

Graceful Degradation: Graceful Degradation focuses on building the website for the most advanced/capable browsers. Testing in browsers deemed older or less capable usually takes place during the last quarter of the development cycle and is often restricted to the previous release of the major browsers. Under this paradigm, older browsers are expected to have a poor, but passable experience. Small fixes may be made to accommodate a particular browser. Because they are not the focus, little attention is paid beyond fixing the most egregious errors.

Progressive Enhancement: Progressive Enhancement focuses on the content. Content is the reason we create websites to begin with. Some sites disseminate it, some collect it, some request it, some manipulate it, and some even do all of the above, but they all require it. The design requires a separation between web page presentation and web page content.

Progressive Enhancement is based on a recognition that the core assumption behind Graceful Degradation that browsers always got faster and more powerful with devices with low-functionality browsers and serious bandwidth constraints. In addition, the rapid evolution of HTML and related technologies in the early days of the Web has slowed, and very old browsers have become obsolete, freeing designers to use powerful technologies such as CSS to manage all presentation tasks and JavaScript to enhance complex client-side behavior.
Scripted interfaces must be accessible and WCAG compliant. It is important to keep in mind that some users disable JavaScript on their devices, or may be using technologies that do not fully support scripting. If your web page or application requires scripting, ensure that you account for users without JavaScript capability. This does not necessarily mean that all functionality must work without scripting, but you must avoid a confusing or non-functional presentation that may appear to function, but does not because of lack of JavaScript support.

Basic content should be accessible to all web browsers.

Basic functionality should be accessible to all web browsers.

Sparse, semantic markup contains all content.

Enhanced layout is provided by externally linked CSS and ARIA.

Enhanced behavior is provided by unobtrusive, externally linked JavaScript.

End-user web browser preferences are respected.

The Accessible Rich Internet Applications (ARIA) Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies. Without ARIA certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. ARIA addresses these accessibility challenges, by defining ways for functionality to be provided to assistive technology. With ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.
The ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. The ARIA describes navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures. The ARIA also includes technologies to map controls, live regions, and events to accessibility application programming interfaces, including custom controls used for rich Internet applications. The ARIA techniques apply to widgets such as buttons, drop-down lists, calendar functions, tree controls, expandable menus, and others.
A web page containing JavaScript will typically be fully accessible if the functionality of the script is device independent (does not require only a mouse or only a keyboard), and the information (content) is available to assistive technologies. Although it is possible to use scripting to create an input element that causes a change of context (submit the form, open a new page, a new window) when the element is selected, but is the user aware of this action. This failure occurs when changing the selection of a radio button, a check box or an item in a select list causes a new window to open. Developers can instead use a submit button or clearly indicate the expected action.
See WCAG Technique G80: Providing a submit button to initiate a change of context
Scripting Challenges:

Embedded objects such as media players.

Device specific events, like mouse clicks.

Generic elements as interface controls.

Scripting elements to emulate links.

Scripted drop-down boxes.

Including the use of libraries and toolkit supports.

Inability or difficulty navigating using a keyboard or assistive technology.

Presentation of content or functionality that is not accessible to assistive technologies.

Lack of user control over automated content changes.

Altering or disabling the normal functionality of the user agent (browser) or triggering events that the user may not be aware of.

Cascading Style Sheet (CSS) Definition
JavaScript Definition
Accessible Rich Internet Applications (ARIA)
Web Content Accessibility Guidelines (WCAG)
UK Government: Building a resilient frontend using progressive enhancement, Service Manual
WebAIM: Accessible Javascript
Failure36 WCAG3.2.2: Failure due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value.
Failure37 WCAG3.2.2: Failure due to launching a new window without prior warning when the status of a radio button, check box or select list is changed.
Failure42 WCAG1.3.1 and WCAG2.1.1: Failure due to using scripting events to emulate links in a way that is not programmatically determinable.
Failure54 WCAG2.1.1: Failure due to using only pointing-device-specific event handlers (including gesture) for a function.
Failure59 WCAG4.1.2: Failure due to using script to make div or span a user interface control in HTML.