6 Usability
User interface guidelines
In addition to the coding guidelines, your team should also strive to create a user-friendly interface with a consistent look and feel across even though multiple team members may design different parts of the system.
The user interface of a system may have an impact on the popularity of your software. It’s possible that you may have the best design for your code with good choices of data structures and efficient algorithms, but a competitor also does a reasonable job, but with a better user interface. You may lose business if users are not as happy with your user interface. Remember that you are designing the user interface for potential users and not necessarily yourself. Your design should reflect the needs and desires of the target audiences.
While there are entire courses and textbook dedicated to user interface design, we only scratch the surface here in this Software Engineering course. However, this course is an opportunity to start thinking about best practices for user interface design.
Let’s start with an exercise. For each team member, identify two user interfaces that you like. Discuss what you like and dislike about each user interface and then broaden your discussion to opinions that others outside of our class may hold. For instance, would you parents, grandparents, roommates, or other friends hold similar opinions or not?
Team member 1:
|
Favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 2:
|
Favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 3:
|
Favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 4:
|
Favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 5:
|
Favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 6:
|
Favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
For each team member, identify two user interfaces that you dislike. Discuss what you like and dislike about each user interface and then broaden your discussion to opinions that others outside of our class may hold. For instance, would you parents, grandparents, roommates, or other friends hold similar opinions or not?
Team member 1:
|
Least favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 2:
|
Least favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 3:
|
Least favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 4:
|
Least favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 5:
|
Least favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
Team member 6:
|
Least favorite user interface |
Team member 1’s likes/dislikes |
Team discussion of likes/dislikes |
|
1:
|
|
|
|
2:
|
|
|
After discussing your team’s opinions, select 3 user interfaces for each team member to independently collect opinions from two friends and family members. You’ll then share your results and discuss the different viewpoints collected.
Each team member should collect answer to the following questions:
User interface 1:
-
- What do you like about this software?
-
- What do you dislike about this software?
User interface 2:
-
- What do you like about this software?
-
- What do you dislike about this software?
User interface 3:
-
- What do you like about this software?
-
- What do you dislike about this software?
Team members should compare results.
|
User interface 1 |
|
Pros:
|
|
Cons:
|
|
Summary of important points from different audiences that we interviewed:
|
|
User interface 2 |
|
Pros:
|
|
Cons:
|
|
Summary of important points from different audiences that we interviewed:
|
|
User interface 3 |
|
Pros:
|
|
Cons:
|
|
Summary of important points from different audiences that we interviewed:
|
As a Software Engineer, always take the opportunity to learn about the opinions of others in regard to different user interfaces. This awareness will strengthen you as a Software Engineer.
Your team should consider guidelines for your user interface design. Examples that we like are the Apple Human Interface Guidelines. For instance, these are examples that highly regarded by many Software Engineers and users:
- Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/
- macOS: https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/
- iOS: https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
- watchIOS: https://developer.apple.com/design/human-interface-guidelines/watchos/overview/themes/
While this is an introductory Software Engineering course and limited time is available to discuss usability topics, at least take a short amount of time to discuss user interface guidelines that will benefit your team. In particular, discuss the following issues as a team:
- Who is our audience? How does the audience influence the design choices for our user interface?
- What is our target platform, i.e., desktop, mobile, watch, embedded system, etc.? How does this influence the design choices for our user interface?
- How we will maintain a consistent look and feel for the user interface when we have different team members working on different parts of the system?
- Create a checklist of rules and best practices to follow as a team.
Color blindness
People with different types of colorblindness may use your software. There are different types and levels of colorblindness. Some people have minor color blindness while others have achromatopsia (total color blindness). It’s important to use color as a secondary form of meaning in case a user has some form of colorblindness. For instance, if a user enters data into a form and forget to enter data into a required field, instead of using red font to denote this, you may want to provide a message that points them to where they made the mistake, use a box to highlight the incomplete field, use bold font to highlight the field, and/or some other solution that is not solely dependent on color.
1. There are free tools on the web to simulate color blindness. For instance, the Colorblinder website allows you to upload screenshots and view them under scenarios of different types of colorblindness. For this exercise, visit a website such as Colorblinder (https://www.color-blindness.com/color-blindness-tools/).
Each team member should find several screenshots of software, upload the examples, and view the results under different colorblindness scenarios. Complete the table with comments about the different results.
Screenshot 1 Name:
Screenshot description:
Describe the differences when you view the screenshot with each type of colorblindness:
|
Type of colorblindness |
Description of noticeable differences (if any) |
|
Red-Weak (Protanomaly) |
|
|
Green-Weak (Deuteranomaly) |
|
|
Blue-Weak (Tritanomaly) |
|
|
Red-Blind (Protanopia) |
|
|
Green-Blind (Deuteranopia) |
|
|
Blue-Blind (Tritanopia) |
|
|
Monochromacy (Achromatopsia) |
|
|
Blue Cone Monochromacy |
|
Screenshot 2 Name:
Screenshot description:
Describe the differences when you view the screenshot with each type of colorblindness:
|
Type of colorblindness |
Description of noticeable differences (if any) |
|
Red-Weak (Protanomaly) |
|
|
Green-Weak (Deuteranomaly) |
|
|
Blue-Weak (Tritanomaly) |
|
|
Red-Blind (Protanopia) |
|
|
Green-Blind (Deuteranopia) |
|
|
Blue-Blind (Tritanopia) |
|
|
Monochromacy (Achromatopsia) |
|
|
Blue Cone Monochromacy |
|
Screenshot 3 Name:
Screenshot description:
Describe the differences when you view the screenshot with each type of colorblindness:
|
Type of colorblindness |
Description of noticeable differences (if any) |
|
Red-Weak (Protanomaly) |
|
|
Green-Weak (Deuteranomaly) |
|
|
Blue-Weak (Tritanomaly) |
|
|
Red-Blind (Protanopia) |
|
|
Green-Blind (Deuteranopia) |
|
|
Blue-Blind (Tritanopia) |
|
|
Monochromacy (Achromatopsia) |
|
|
Blue Cone Monochromacy |
|
Screenshot 4 Name:
Screenshot description:
Describe the differences when you view the screenshot with each type of colorblindness:
|
Type of colorblindness |
Description of noticeable differences (if any) |
|
Red-Weak (Protanomaly) |
|
|
Green-Weak (Deuteranomaly) |
|
|
Blue-Weak (Tritanomaly) |
|
|
Red-Blind (Protanopia) |
|
|
Green-Blind (Deuteranopia) |
|
|
Blue-Blind (Tritanopia) |
|
|
Monochromacy (Achromatopsia) |
|
|
Blue Cone Monochromacy |
|
Screenshot 5 Name:
Screenshot description:
Describe the differences when you view the screenshot with each type of colorblindness:
|
Type of colorblindness |
Description of noticeable differences (if any) |
|
Red-Weak (Protanomaly) |
|
|
Green-Weak (Deuteranomaly) |
|
|
Blue-Weak (Tritanomaly) |
|
|
Red-Blind (Protanopia) |
|
|
Green-Blind (Deuteranopia) |
|
|
Blue-Blind (Tritanopia) |
|
|
Monochromacy (Achromatopsia) |
|
|
Blue Cone Monochromacy |
|
Screenshot 6 Name:
Screenshot description:
Describe the differences when you view the screenshot with each type of colorblindness:
|
Type of colorblindness |
Description of noticeable differences (if any) |
|
Red-Weak (Protanomaly) |
|
|
Green-Weak (Deuteranomaly) |
|
|
Blue-Weak (Tritanomaly) |
|
|
Red-Blind (Protanopia) |
|
|
Green-Blind (Deuteranopia) |
|
|
Blue-Blind (Tritanopia) |
|
|
Monochromacy (Achromatopsia) |
|
|
Blue Cone Monochromacy |
|
Localization
Software is often created for a global audience. This section provides a brief overview of some considerations. While we may not have a vast knowledge of all of the cultures and languages in the world, we can follow some basic user interface guidelines to promote the successful localization of our software. In this section, we focus on left-to-right written languages.
Text Lengths and Layout
The length of text may change when we translate from one language to another. A five-character word in English may translate to a fifteen-character word in German. A five-character word in English may even translate to three words in Polish and vice versa. We need to accommodate for these possibilities when designing user interfaces.
Exercise
If any of your team members are familiar with other languages, translate the following phrases and notice whether the text expands or shrinks.
|
English
|
Danish |
French |
Other language: |
|
Would you like to continue?
|
Ønsker De at fortsætte? |
Voudriez-vous continuer? |
|
|
Print Preview
|
Udskriftsforevisning |
Imprimez l’avant-premiére |
|
|
Save |
Gem |
Gardez |
|
|
Wizard
|
“Ekspert”* |
“Sorcier” or perhaps “Génie” |
|
|
Press any key to continue |
Tryk på en vilkårlig tast for at fortsæ |
Poussez n’importe quelle touché pour continuer. |
|
* Danish Wizard: This literally translates as “Troldmand”, but that is probably not what you want – you probably want “expert”
Graphics
Avoid placing text in graphics whenever possible so that you do not need to create new buttons in every language. It may save time and effort to reuse graphics. You should also research the value of the graphics that you use to make sure that they are intuitive and fit culturally.
Short-cuts/Icons
Keyboard shortcuts and icons should map to the new user’s language. Short cuts should map to letters that make sense, but you should also research short-cut keystrokes that already exist for the audience of the respective language.
Culture Adaptation
Some things that we take for granted do not have the same meaning in other countries. Do research on existing norms for the target user base.
Exercise
Select a screen from an app of your team’s choice and assess whether it was designed to promote localization.
Webapp 1 name:
Location of webapp (URL):
Description of screen under review (i.e., name and/or functionality):
List the phrases on the screen and translate them to three languages of your choice. Ideally, use languages that team members are familiar, but if this is not an option, use Google Translate. Google Translate is available at: http://translate.google.com
|
Original Text (English) |
Language 1: |
Language 2: |
Language 3: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Assess the following checklist:
|
Issue |
Are there localization concerns? (Yes or No) |
If there are concerns, provide comments. |
|
Wordiness
|
|
|
|
Graphics with embedded text
|
|
|
|
Features that may not be available in other languages
|
|
|
|
Short-cuts or icons to update
|
|
|
|
Cultural adaption
|
|
|
Webapp 2 name:
Location of webapp (URL):
Description of screen under review (i.e., name and/or functionality):
List the phrases on the screen and translate them to three languages of your choice. Ideally, use languages that team members are familiar, but if this is not an option, use Google Translate. Google Translate is available at: http://translate.google.com
|
Original Text (English) |
Language 1: |
Language 2: |
Language 3: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Assess the following checklist:
|
Issue |
Are there localization concerns? (Yes or No) |
If there are concerns, provide comments. |
|
Wordiness
|
|
|
|
Graphics with embedded text
|
|
|
|
Features that may not be available in other languages
|
|
|
|
Short-cuts or icons to update
|
|
|
|
Cultural adaption
|
|
|
Webapp 3 name:
Location of webapp (URL):
Description of screen under review (i.e., name and/or functionality):
List the phrases on the screen and translate them to three languages of your choice. Ideally, use languages that team members are familiar, but if this is not an option, use Google Translate. Google Translate is available at: http://translate.google.com
|
Original Text (English) |
Language 1: |
Language 2: |
Language 3: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Assess the following checklist:
|
Issue |
Are there localization concerns? (Yes or No) |
If there are concerns, provide comments. |
|
Wordiness
|
|
|
|
Graphics with embedded text
|
|
|
|
Features that may not be available in other languages
|
|
|
|
Short-cuts or icons to update
|
|
|
|
Cultural adaption
|
|
|
