Designer Lesson 5
Section Header & Icon Button
Connect a Section Header
Connect an Icon Button
Complete Lesson 5 video instruction
CompleteLesson 5 Activities
Section Headers and Icon Buttons organize and create a user-friendly application.
Lesson 5 Video: Adding Section Header & Icon Button
Training App – Lesson 5 Icon Button
Design Concepts: Section Header and Icon Button Attributes
When would you use a Section Header instead of an Icon Button? How would you design it? What limitations do you have with the design of a Section Header?
Study the attributes of the Section Header first. Notice that it welcomes visitors. Is this the only purpose for the Section Header, or is there another reason it was added to the application? Tapping on the Section Header does not take the user into the site. Why not? Do you feel that the Section Header serves an important enough role here to devote space to it? If yes, is there anything you would do to the Welcome to Greensboro Section Header to improve it? Keep in mind the design constraints of the Section Header.
The Bullseye Display is the most often used component. With it users can move deeper into an application with ease. Different images can be used on the bullseye display to engage both user interest and curiosity. Keep in mind that images should meet four main criteria:
create visual harmony
add emphasis by creating a mood
draw the user’s attention
convey the scope and vision of the school, business, or city
Images that hook user interest are essential to use on a bullseye display.
Now determine how Icon Buttons differ from Section Headers. Each of these icon buttons is designed to take the user deeper into the application. Users quickly can find out when the market is open and where it is located. Additionally, the app is designed to provide helpful parking information with a tap on the screen.
What helps the user to know that tapping on the icon button will take the user deeper into the app?
What purpose do the icons serve?