Designer Lesson 2 

Application a Menu

What

  • Build an application menu specific to the application’s customer base
  • Employ best practices in menu design

How

  • Complete Lesson 2 video instruction
  • Complete Lesson 2 Activities

Why

The application menu creates a quick reference tool for users who want to quickly move to needed information found in the application.

Resources

  • Lesson 2 Video: Application Menu
  • Training app – Lesson 2 Application Menu Pages
 
hinticon.png

Design Concepts: Effective Menu Buttons

Text and Image Choices

  • Limit the amount of text. Use one to two key words on each of your buttons so users quickly know where the button leads.
  • Determine if you prefer words with each letter capitalized or the first letter capitalized followed by lower-case. Use a consistent text style. 
  • Keep readability in mind. Choose a font that is easy to read with good spacing between letters. Simple is best when choosing a font. 
  • Manage your margins so that the words are juxtaposed with the image.
  • Use high quality images that are copyright free. 
  • Use images that are uncluttered, easily associated with the menu item, and colorful. 
  • Don't over-design. Too much color can be distracting.  

 

Below are six possible menu images.

  • Which images would be good choices for display on menu buttons?
  • Why might they the best choices?

Color Choices

Make sure you have high contrast between the foreground font(text)color and the menu button background color. Dark text on a light background has quicker response read time than light text on a dark background. Keep in mind how colorblindness affects the way some individuals perceive color.

Red-Green Color Blindness - possible perceptions:

  • Red, orange, and yellow appear green and not as bright, or
  • Red appears as black.  Orange, yellow, and green appear as yellow, or
  • Yellow and green appear redder.   Violet is difficult to tell from blue, or
  • Red appears as brownish-yellow. Greens appear as beige.

Blue-Yellow Color Blindness possible perceptions:

  • Blue appears greener. Distinction between yellow and red from pink are difficult, or
  • Blue appears green. Yellow appears violet or light gray.

For more information about color blindness see this article from the National Eye Institute

 

Below are six examples of use of color in menu buttons.

  1. Which provides the best foreground-background contrast? Why?
  2. Which might be difficult to read for individuals with red-green colorblindness?Why?
  3. Which might be difficult to read for individuals with blue-yellow colorblindness? Why?