SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Flat Card Pattern Pros Quick Focused Content Varied Content Layout Cons Traversing from start to end of the stack Issues of scaling the number of cards Tiny page dots
Tab/Nav Bar Pattern Pros Easy access to main sections Easy overview of the features and the context Navigation marker Cons Limited number of tabs Tab always on screen
List/Tree Pattern Pros	 Scales past 5 items Direct interaction Cons User must remember their navigation path Must travel to top node to access another branch Scroll risk
Dashboard Pattern Pros	 Reveals capabilities Offers shortcuts to key sections Can be colorful and engaging Cons Falling out of favor Return Navigation mystery Hub-Spoke navigation
Combination Patterns
Flat Card, Tab, List & Dashboard UI Patterns Compared

Weitere ähnliche Inhalte

Mehr von Evan Hughes

Iml140 web week_1
Iml140 web week_1Iml140 web week_1
Iml140 web week_1Evan Hughes
 
Dreamweaver Template
Dreamweaver TemplateDreamweaver Template
Dreamweaver TemplateEvan Hughes
 
Iml140 cs sbasics_week5
Iml140 cs sbasics_week5Iml140 cs sbasics_week5
Iml140 cs sbasics_week5Evan Hughes
 
Week 4 css basics
Week 4 css basicsWeek 4 css basics
Week 4 css basicsEvan Hughes
 
Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)Evan Hughes
 
Web and creative cultures week 2
Web and creative cultures week 2Web and creative cultures week 2
Web and creative cultures week 2Evan Hughes
 
Web and creative cultures week 2
Web and creative cultures week 2Web and creative cultures week 2
Web and creative cultures week 2Evan Hughes
 
Dreamweaver template
Dreamweaver templateDreamweaver template
Dreamweaver templateEvan Hughes
 
IML 140 Design - Basics
IML 140 Design - BasicsIML 140 Design - Basics
IML 140 Design - BasicsEvan Hughes
 
Remixand culture
Remixand cultureRemixand culture
Remixand cultureEvan Hughes
 
Weeks3 5 cs_sbasics
Weeks3 5 cs_sbasicsWeeks3 5 cs_sbasics
Weeks3 5 cs_sbasicsEvan Hughes
 
Color Theory Basics
Color Theory BasicsColor Theory Basics
Color Theory BasicsEvan Hughes
 
Iml140 web week_1
Iml140 web week_1Iml140 web week_1
Iml140 web week_1Evan Hughes
 
Digital portfolio
Digital portfolioDigital portfolio
Digital portfolioEvan Hughes
 
Week 3 html_css_basics
Week 3 html_css_basicsWeek 3 html_css_basics
Week 3 html_css_basicsEvan Hughes
 
Iml 140 web_week_1_html_basics_
Iml 140 web_week_1_html_basics_Iml 140 web_week_1_html_basics_
Iml 140 web_week_1_html_basics_Evan Hughes
 

Mehr von Evan Hughes (20)

Iml140 web week_1
Iml140 web week_1Iml140 web week_1
Iml140 web week_1
 
Dreamweaver Template
Dreamweaver TemplateDreamweaver Template
Dreamweaver Template
 
Iml140 cs sbasics_week5
Iml140 cs sbasics_week5Iml140 cs sbasics_week5
Iml140 cs sbasics_week5
 
Week 4 css basics
Week 4 css basicsWeek 4 css basics
Week 4 css basics
 
Word Press Site
Word Press SiteWord Press Site
Word Press Site
 
Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)
 
Web and creative cultures week 2
Web and creative cultures week 2Web and creative cultures week 2
Web and creative cultures week 2
 
Web and creative cultures week 2
Web and creative cultures week 2Web and creative cultures week 2
Web and creative cultures week 2
 
Dreamweaver template
Dreamweaver templateDreamweaver template
Dreamweaver template
 
IML 140 Design - Basics
IML 140 Design - BasicsIML 140 Design - Basics
IML 140 Design - Basics
 
Remixand culture
Remixand cultureRemixand culture
Remixand culture
 
Weeks3 5 cs_sbasics
Weeks3 5 cs_sbasicsWeeks3 5 cs_sbasics
Weeks3 5 cs_sbasics
 
Color Theory Basics
Color Theory BasicsColor Theory Basics
Color Theory Basics
 
Iml 295 week
Iml 295 weekIml 295 week
Iml 295 week
 
Iml140 web week_1
Iml140 web week_1Iml140 web week_1
Iml140 web week_1
 
Digital portfolio
Digital portfolioDigital portfolio
Digital portfolio
 
Rule of thirds
Rule of thirdsRule of thirds
Rule of thirds
 
Rule of thirds
Rule of thirdsRule of thirds
Rule of thirds
 
Week 3 html_css_basics
Week 3 html_css_basicsWeek 3 html_css_basics
Week 3 html_css_basics
 
Iml 140 web_week_1_html_basics_
Iml 140 web_week_1_html_basics_Iml 140 web_week_1_html_basics_
Iml 140 web_week_1_html_basics_
 

Kürzlich hochgeladen

The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991RKavithamani
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfUmakantAnnand
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersChitralekhaTherkar
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 

Kürzlich hochgeladen (20)

The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.Compdf
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of Powders
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 

Flat Card, Tab, List & Dashboard UI Patterns Compared

  • 1.
  • 2.
  • 3.
  • 4. Flat Card Pattern Pros Quick Focused Content Varied Content Layout Cons Traversing from start to end of the stack Issues of scaling the number of cards Tiny page dots
  • 5.
  • 6.
  • 7. Tab/Nav Bar Pattern Pros Easy access to main sections Easy overview of the features and the context Navigation marker Cons Limited number of tabs Tab always on screen
  • 8.
  • 9.
  • 10. List/Tree Pattern Pros Scales past 5 items Direct interaction Cons User must remember their navigation path Must travel to top node to access another branch Scroll risk
  • 11.
  • 12.
  • 13. Dashboard Pattern Pros Reveals capabilities Offers shortcuts to key sections Can be colorful and engaging Cons Falling out of favor Return Navigation mystery Hub-Spoke navigation

Hinweis der Redaktion

  1. This pattern breaks you app into focused sub-tasksEarly Android UI patterns had the tab bar at the top of the screen, but can anyone tell me the issue with that location?