Cards
The user wants to see an overview of the larger set of available content.
Problem
The user wants to see an overview of the larger set of available content.
Solution
Use cards to render a summary or highlight of the full content. The cards can contain photos, text and can link to the more expanded and detailed information.
Use cards to enclose multiple data types into one entity like images, text, audio and video.
Cards usually provide an overview of the greater dataset and serve as an entry point to more detailed content. Don't overload with too much information.
Use the swipe gesture to navigate cards laid out horizontally. When rendering multiple card collections, vertical scrolling should be used for finding the correct collection.
Cards can contain additional actions like shortcuts, and primary call to action. Try to limit these to a maximum of two while concentrating only on the most important tasks.
Use icon and text buttons and compact UI controls, like a rating slider for providing the necessary interactivity.
View in full screen
Barry Lyon
Chief Technology Officer
(202) 555-0193
Hortense Tinker
Network Engineer
(202) 555-0127
Arlene Sharman
Certified Personal Trainer
(202) 555-0190
Angelica Geary
Designer
(202) 555-0442
Carl Hambledon
Java developer
(202) 555-0639
Lowell Christophers
Frontend developer
(202) 555-0354
Problem
The user wants to see an overview of the larger set of available content.
Solution
Use cards to render a summary or highlight of the full content. The cards can contain photos, text and can link to the more expanded and detailed information.
Use cards to enclose multiple data types into one entity like images, text, audio and video.
Cards usually provide an overview of the greater dataset and serve as an entry point to more detailed content. Don't overload with too much information.
Use the swipe gesture to navigate cards laid out horizontally. When rendering multiple card collections, vertical scrolling should be used for finding the correct collection.
Cards can contain additional actions like shortcuts, and primary call to action. Try to limit these to a maximum of two while concentrating only on the most important tasks.
Use icon and text buttons and compact UI controls, like a rating slider for providing the necessary interactivity.