Description
Introduction:
Apply usability and accessibility principles. First, review the usability principles in Designing the User Interface, Section 3.3.4 “The Eight Golden Rules of interface design” (note: these are related to but distinct from Norman’s principles). Review the accessibility principles defined by W3C’s WCAG 2.1Links to an external site. standard (feel free to refer to WebAIM’s quick referenceLinks to an external site. and checklistLinks to an external site.).
Then, choose an interactive system to evaluate. For this system, you will need to illustrate and explain how 4 usability and 2 accessibility principles (6 principles in total) apply. An example “interactive system” may be a Web application, a mobile phone app, a game, or simply an interactive device (e.g., a radio, microwave, smart speaker, etc.). You have a lot of flexibility, but be strategic. Choose a system which lends itself to usability/accessibility analysis, perhaps a system with which you have personal experience. Also, choose a system for which you can provide screen captures, photos, or other audio-visual representations of the interaction.
Good submissions will provide an introduction with a brief description of the system and summary of the report’s intent. The body of the report should consist of analysis organized by the 6 principles you chose, with separate subsections for each. For each principle, describe how the system adheres to or departs from that principle, using images or illustrations of the system to communicate your points. End with a synthetic conclusion. Your submission should not be a simple list, but instead written as an essay or report about the system with several sections.
Please make your submission single spaced; the full submission should be no fewer than 5 pages and no longer than 10 pages. Images count toward the page limit, but references do not. References/citations can be in any format (e.g., APA, Harvard, ACM, etc.), as long as you choose one and stick with it. Submissions should use a professional technical writingLinks to an external site. style.
Accessibility
You will be evaluated on the accessibility of headings, lists, hyperlinks, images, and paragraphs/line spacing.
Extra 7%
This is something at the intersection of your skillset and your interests on the one hand, and the needs and interests of the target audience (i.e., the instructional team, some imagined Product Manager who asked you to put the report together, etc.) on the other.. You are encouraged to be creative and think outside the box, but please remain professional and make sure your addition(s) serve as a complementary extension to your report.
Tips for Using Effective Visual Aids:
In UX design, visual representations are a critical form of communication and about design. However, using visuals to make a persuasive argument is not as straight forward as you might assume; it is a skill that requires development. Below are some tips that can help you earn top points on your submission’s visual aids presentation.
Use your words. Do not expect a screenshot or photo to speak for itself. A phrase like, “as can be seen in the screenshot…” is meaningless if there isn’t more detail provided. For example, I might provide a screenshot of a Canvas page and then include the following in the body text, “As can be seen in Figure 1, the blue navigation pane along the left display several icons which link to various features, including the Dashboard, Courses, and a Calendar.”
Use annotations and zoom in. Circles, arrows, highlights, and text can all be added to an image to indicate where readers should look. When important details of your images are too small to read without digital zoom, you need to magnify all or part of the image. Here’s a great article with examples of how to present informative screenshotsLinks to an external site. using annotations and zoom.
Create a drawing. Sometimes a photograph or screenshot has too much distracting detail. A simple drawing can abstract away the unimportant features and highlight those you are interested in. For example, a “wireframe” sketch is a way to show the content areas of a webpage without filling in all the content (here are some examplesLinks to an external site.).
Add identifiers, captions, and in-line citations. You should label each image with a unique figure or table number, and then provide a brief summary of what the image should convey to the reader. The unique identifier allows you to refer to the visual aid in-line, so that readers can see how the visual relates to the body text. The caption is helpful for skimmers, who need to quickly understand the most important arguments of the report.
Add alt text. If there is essential information that is conveyed in the visual aid but is not conveyed by the body text or caption, then you should add alternative textLinks to an external site..
Unformatted Attachment Preview
Project 1: An Analysis of Discord
IN4MATX 131,
Introduction
Discord is one of the most popular messaging platforms, allowing its users to
communicate with each other through instant messaging, voice and video calling, and
group-based chats, called servers. Being the primary form of communication for many
organizations, school clubs, and even hybrid-style courses, the platform must be as intuitive
and accessible as possible— new users, regardless of disability status, must quickly become
accustomed to each feature. Based on the usability and accessibility principles presented in
this course, Discord successfully implements many methods to promote ease of access,
demonstrating an awareness of its wide userbase. Focusing on the desktop platform, this
project will analyze how Discord exhibits the usability principles Prevent Errors, Strive for
consistency, and Permit easy reversal of actions. Afterward, it will present the ways in which
the messaging service exemplifies the accessibility principles Perceivable, Operable, and
Understandable.
Usability Principles
… …
Permit Easy Reversal of Actions
When a user takes any action, intentional or not, it is vital to offer an easy method to
undo what has been done. Giving people the choice to change their mind “relieves anxiety…
and encourages exploration of unfamiliar options” (Schneiderman, et al. 201) which are
remarkable ways to grow users’ trust in the platform.
Figure 3. Discord’s action-reversal methods to remove reactions, messages, and pins.
Discord offers easy action-reversal methods for almost every component, making it a
low-risk decision for users to experiment with new features. The first two images in Figure 3
above display the simple way to remove any reactions or messages after they have been sent,
and these options are respectively highlighted in red. If a user were to select the wrong
reaction emoji or send a message to an unintended recipient, Discord provides the peace of
mind that these actions can be reversed at any time.
In the third image in Figure 3, it is clear that pinned messages can be removed in a
similar manner, with the removal button shown in red. Just as reactions and messages can be
removed at any time, pinned messages have the option to be reversed whenever the user
desires to. By implementing these choices, Discord exhibits the principle of permitting easy
reversal of actions since it is straightforward to undo one’s choices, regardless of what has
been done. Compared to other platforms which often limit users’ abilities to undo messages,
Discord can attract a larger user base by allowing this higher level of flexibility.
Accessibility Principles
… …
Perceivable
To promote an inclusive digital environment for all, Discord successfully implements a
variety of accessibility features, especially pertaining to perceivability through a person’s
different senses. In this way, the platform can offer its services to as many users as possible,
regardless of their disability status.
Figure 4. Visual accessibility options allow saturation adjustments, reduced motion, and more.
Even for those who have full vision, many color themes or visual effects are distracting
or difficult to view. To help people with these additional needs, Discord has included the array
of visual accessibility options listed in Figure 4 above, allowing users to adjust saturation
levels, underline links, and change options related to motion effects from top to bottom. By
allowing users to customize their experience, people of all visual ability levels comfortably
focus on the content, identify links and features, and connect with others without experiencing
frustration or physical discomfort. The last two options in Figure 4 additionally allow users to
limit the amount of motion on-screen which is still an uncommon feature in messaging
platforms, displaying Discord’s increased commitment to making its platform accessible.
Figure 5. Discord’s text-to-speech feature will read you messages.
For those who have visual impairments, the ‘Speak Message’ feature highlighted in
purple in Figure 5 contributes enormously to perceivability. By either selecting the shown
option or using a keyboard shortcut, messages can be read aloud making it easy for blind and
vision-impaired people to follow conversations and communicate with others online.
Concerning the content on a platform, “if users cannot perceive [it], it is inaccessible by
definition” (WebAIM). Thus, it is crucial that people are able to engage with the information in
different ways, and Discord acknowledges this by providing options for any personal
difficulties or sensitivities.
Extra Analysis: How Discord Can Improve
Discord does a phenomenal job at creating an inclusive messaging platform that can be
utilized easily by all people, for so many different purposes. However, after reading through the
list of principles, there are also areas where the platform can be improved for the future.
The most important usability principle that should be incorporated at this stage is to
offer informative feedback. Although Discord offers satisfactory error-prevention messages,
as described in the above sections, many actions still lack a system response. A notable
example occurs in the list of ‘Direct Messages’, where if a user selects the ‘x’ icon, shown in
Figure 9 below, next to a contact, the contact disappears from the list with no feedback.
Figure 9. The ‘x’ icon for Direct Messages removes the contact without feedback.
To improve this design and implement the principle of offering informative feedback,
Discord should display a small pop-up message stating a message similar to: “ was
removed from your message list.” Adding the principle of easy reversal of actions, the message
should also include an undo button allowing users to quickly re-add the contact to their list. A
mockup of this new feature could look like the following figure.
Works Cited
Shneiderman, Ben, et al. “3.3.4 The Eight Golden Rules of Interface Design.” Designing the
User Interface: Strategies for Effective Human-Computer Interaction, 6th ed., Pearson,
Harlow, Essex, 2018.
WebAIM, “Constructing a POUR Website – Perceivable.” Institute for Disability Research,
Policy, and Practice, 4 Oct. 2021.
WebAIM, “Constructing a POUR Website – Operable.” Institute for Disability Research, Policy,
and Practice, 4 Oct. 2021.
Purchase answer to see full
attachment
