Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface

Web Sites UI Taxonomy & Design

Cazorla, L., García Pascual, G., Martin Checa, J.A.,Ruiz Montiel, M.

(Cooperative Information Systems)Master in Software Engineering & Artificial Intelligence

Web Sites UI Taxonomy Web Sites UI Taxonomy & Design& Design

Cazorla, L., GarcCazorla, L., Garcíía Pascual, G., Martin Checa, J.A.,a Pascual, G., Martin Checa, J.A.,Ruiz Montiel, M. Ruiz Montiel, M.

(Cooperative Information Systems)(Cooperative Information Systems)Master in Software Engineering & Artificial IntelligenceMaster in Software Engineering & Artificial Intelligence

Computer Science DepartmentUniversity of Malaga, Spain

Group-32011

Index of contentsIndex of contentsIndex of contents

Introduction1. ”Newspaper-type” Interface (NPT-I)2. “Central grid-based” Interface (CGB-I)3. “Central item + comment list” Interface (CICL-I)4. “Upper menu + sections” Interface (UMS-I) 5. ”Bank-type” Interface (BKT-I)6. ”Wiki-type” Interface (WKT-I)7. ”Mail-type” Interface (MLT-I)8. ”Standard” Interface (STD-I)9. ”Mobile-friendly” Interface (MBL-I)Conclusions

Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain

IntroductionIntroduction

1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)

Introduction

- Taxonomy: ”the practice and science ofclassification”

- Many web pages share the same layout or user interfaces

- We have extracted several kinds of interfacesby studying the structure of a collection of web pages

Introduction

- Taxonomy: ”the practice and science ofclassification”

- Many web pages share the same layout or user interfaces

- We have extracted several kinds of interfacesby studying the structure of a collection of web pages

IntroductionIntroduction 1. NPT1. NPT--I 2. I 2. CGB-I 3. 3. CICL-I 4. 4. UMS-I 5. 5. BKT-I 6. WKT-I 7. MLT-I 8. STD-I 9. MBL-I Conclusions

1. Newspaper-typeInterface(NPT-I)

1.1. Design Characteristics

1. Heading: name, adds & menu2. Central section: news (1, 3, 4 col)3. Right section: brief news, adds &

relevant sections

1. Heading: name, adds & menu2. Central section: news (1, 3, 4 col)3. Right section: brief news, adds &

relevant sections

Introduction Introduction 1. NPT1. NPT--I I 2. 2. CGB-I 3. 3. CICL-I 4. 4. UMS-I 5. 5. BKT-I 6. WKT-I 7. MLT-I 8. STD-I 9. MBL-I Conclusions

1.2. Examples

1. NewspapersEl País, El Mundo, Marca, 20 Minutos, The Times

2. MagazinesHola, Cosmopolitan, Hello, National Geographic

3. Leisurewww.librosgratis.org, www.labutaca.net

1.2. Examples

1. NewspapersEl País, El Mundo, Marca, 20 Minutos, The Times

2. MagazinesHola, Cosmopolitan, Hello, National Geographic

3. Leisurewww.librosgratis.org, www.labutaca.net

Introduction Introduction 1. NPT1. NPT--I I 2. 2. CGB-I 3. 3. CICL-I 4. 4. UMS-I 5. 5. BKT-I 6. WKT-I 7. MLT-I 8. STD-I 9. MBL-I Conclusions

2. Central grid-based Interface

(CGB-I)

2. Central grid-based Interface

(CGB-I)

1. Central Section: grid / thumbnails(new/popular items)

2. Upper, right, left: variable(categories, lists of relevant items,related adds, etc.)

1. Central Section: grid / thumbnails(new/popular items)

2. Upper, right, left: variable(categories, lists of relevant items,related adds, etc.)

Introduction 1. NPTIntroduction 1. NPT--I I 2. 2. CGB-I 3. 3. CICL-I 4. 4. UMS-I 5. 5. BKT-I 6. WKT-I 7. MLT-I 8. STD-I 9. MBL-I Conclusions

2.2. Examples

1. Movies (www.fotogramas.es)2. Books (Anaya Multimedia)3. Tv (rtve, tvunetworks, veetle)4. Videogames / Minigames (www.minijuegos.es)5. Online Stores (Amazon, Fnac)6. Series (www.serieonline.net)7. Videos (www.youtube.com, www.megavideo.com)

2.2. Examples

1. Movies (www.fotogramas.es)2. Books (Anaya Multimedia)3. Tv (rtve, tvunetworks, veetle)4. Videogames / Minigames (www.minijuegos.es)5. Online Stores (Amazon, Fnac)6. Series (www.serieonline.net)7. Videos (www.youtube.com, www.megavideo.com)

(Screenshot/s here)(Screenshot/s here)

3. Central item + comment list

Interface(CICL-I)

3. Central item + comment list

Interface(CICL-I)

1. Central item

2. Below: List of comments

1. Central item

2. Below: List of comments

Introduction 1. NPTIntroduction 1. NPT--I 2. I 2. CGB-I 3. 3. CICL-I 4. 4. UMS-I 5. 5. BKT-I 6. WKT-I 7. MLT-I 8. STD-I 9. MBL-I Conclusions

3.2. Examples

1. FAQ (Yahoo Answers)2. Photos/videos (Flickr, social

networks)3. Articles (newspapers, blogs,

magazines)4. Products opinions

3.2. Examples

1. FAQ (Yahoo Answers)2. Photos/videos (Flickr, social

networks)3. Articles (newspapers, blogs,

magazines)4. Products opinions

(Screenshot/s here)(Screenshot/s here)

4. Upper menu + sections Interface

(UMS-I)

4. Upper menu + sections Interface

(UMS-I)

1. Upper menu: access to sections2. Main body: 2 horizontal sections3. Section-1: main service

(download, purchase, upload)4. Section-2: product/service info

(rows/columns)

1. Upper menu: access to sections2. Main body: 2 horizontal sections3. Section-1: main service

(download, purchase, upload)4. Section-2: product/service info

(rows/columns)Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain

4.2. Examples

1. Software (Netbeans, Skype, Spotify, Firefox)

2. File hosting (RapidShare, Megaupload)

4.2. Examples

1. Software (Netbeans, Skype, Spotify, Firefox)

2. File hosting (RapidShare, Megaupload)

5. Bank-typeInterface(BKT-I)

1. Small dimensions2. Upper menu: types of users3. Central section: service/new4. Lateral sections: login, info

(services, coorporate)

1. Small dimensions2. Upper menu: types of users3. Central section: service/new4. Lateral sections: login, info

(services, coorporate)

5.2. Examples

1. www.bancosantander.es2. www.cajamadrid.es3. www.lacaixa.es4. www.unicaja.es5. www.cajamar.es

5.2. Examples

1. www.bancosantander.es2. www.cajamadrid.es3. www.lacaixa.es4. www.unicaja.es5. www.cajamar.es

6. Wiki-typeInterface(WKT-I)

1. Spacious2. Content: text / images3. Up/left: navigation bars

(small, unflashy)4. Small header: reg/login, history5. Left bar: logo, menu & tools

1. Spacious2. Content: text / images3. Up/left: navigation bars

(small, unflashy)4. Small header: reg/login, history5. Left bar: logo, menu & tools

6.2. Examples

1. Wikipedia (www. en.wikipedia.org)2. Wikinews (www.en.wikinews.org)3. Wikitravel (www.wikitravel.org)4. Wiktionary (www.en.wiktionary.org)5. Siette (http://jupiter.lcc.uma.es/siette.wiki.es/index.php/Portada)

6.2. Examples

1. Wikipedia (www. en.wikipedia.org)2. Wikinews (www.en.wikinews.org)3. Wikitravel (www.wikitravel.org)4. Wiktionary (www.en.wiktionary.org)5. Siette (http://jupiter.lcc.uma.es/siette.wiki.es/index.php/Portada)

7. Mail-typeInterface(MLT-I)

1. Main Section: table containing a list of e-mails or threads

2. Left: optionally, a list of categories or folders

3. Top & bottom: navigation menu + buttons or links for typical actions (compose, delete, mark as read, etc.)

1. Main Section: table containing a list of e-mails or threads

2. Left: optionally, a list of categories or folders

3. Top & bottom: navigation menu + buttons or links for typical actions (compose, delete, mark as read, etc.)

7.2. Examples

1. WebMail (Hotmail, Gmail, Yahoo, Squirrel)

2. Forums (phpBB, vBulletin)

7.2. Examples

1. WebMail (Hotmail, Gmail, Yahoo, Squirrel)

2. Forums (phpBB, vBulletin)

8. StandardInterface(STD-I)

1. Heading: name, banner & menu2. Central Section: wider, includes text or

a messages list3. Left: navigation links / form4. Right: less relevant links or ads5. Bottom: optionally, some important

1. Heading: name, banner & menu2. Central Section: wider, includes text or

a messages list3. Left: navigation links / form4. Right: less relevant links or ads5. Bottom: optionally, some important

linksWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain

8.2. Examples

1. Joomla! (http://patio.lcc.uma.es)

2. Online betting (bwin, betfair, miapuesta)3. Travel booking (airlines, trains...)

4. Some public entities (University of

Malaga, Spain Ministry of Education)

8.2. Examples

1. Joomla! (http://patio.lcc.uma.es)

2. Online betting (bwin, betfair, miapuesta)3. Travel booking (airlines, trains...)

4. Some public entities (University of

Malaga, Spain Ministry of Education)

9. Mobile-FriendlyInterface(MBL-I)

1. Very lightweight, stack layout with unfixed width

2. Top/Bottom: name + optional link to desktop version of the web page +simple horizontal navigation menu

3. Main body: text, links, small images, simple forms

1. Very lightweight, stack layout with unfixed width

2. Top/Bottom: name + optional link to desktop version of the web page +simple horizontal navigation menu

3. Main body: text, links, small images, simple forms

9.2. Examples

1. Blogs (http://m.xataka.com)

2. Banks (movil.lacaixa.es, www.bbva.mobi)3. Newspapers (movil.elpais.com, movil.as.com)4. Online stores (amazon)

9.2. Examples

1. Blogs (http://m.xataka.com)

2. Banks (movil.lacaixa.es, www.bbva.mobi)3. Newspapers (movil.elpais.com, movil.as.com)4. Online stores (amazon)

ConclusionsConclusions

Conclusions

9 different categories can be used as an UI taxonomy

for web pages

Based on the layout and structure of web pages

Work has been done by studying a set of representative web pages that can be found on the internet, extracting common features

MBL-I: special case; alternative for mobile devices users

Conclusions

9 different categories can be used as an UI taxonomy

for web pages

Based on the layout and structure of web pages

Work has been done by studying a set of representative web pages that can be found on the internet, extracting common features

MBL-I: special case; alternative for mobile devices users

ReferencesReferences

Cazorla, L., García-Pascual, G., Martin-Checa, J.A., Ruiz-Montiel, M. 2011. Web Sites UI Taxonomy & Design. Universidad de Málaga.

http://www.webdesign.org/http://www.usability.gov/guidelines/http://webdesign.about.com/od/webdesignbasics/Principles_of_Web_Design.htm

http://www.blogstorm.co.uk/top-10-worst-websites/http://www.webpagesthatsuck.com/http://www.angelfire.com/super/badwebs/main.htmhttp://www.pcworld.com/article/127116/the_25_worst_web_sites.html

Cazorla, L., García-Pascual, G., Martin-Checa, J.A., Ruiz-Montiel, M. 2011. Web Sites UI Taxonomy & Design. Universidad de Málaga.

http://www.webdesign.org/http://www.usability.gov/guidelines/http://webdesign.about.com/od/webdesignbasics/Principles_of_Web_Design.htm

http://www.blogstorm.co.uk/top-10-worst-websites/http://www.webpagesthatsuck.com/http://www.angelfire.com/super/badwebs/main.htmhttp://www.pcworld.com/article/127116/the_25_worst_web_sites.html

You might be thinking...You might be thinking...You might be thinking...

Now you can impress your friends talking about web sites UItaxonomy & designplease, ask!

Web Sites UI Taxonomy & Design

Cazorla, L., García Pascual, G., Martin Checa, J.A.,Ruiz Montiel, M.

(Cooperative Information Systems)Master in Software Engineering & Artificial Intelligence

Web Sites UI Taxonomy Web Sites UI Taxonomy & Design& Design

Cazorla, L., GarcCazorla, L., Garcíía Pascual, G., Martin Checa, J.A.,a Pascual, G., Martin Checa, J.A.,Ruiz Montiel, M. Ruiz Montiel, M.

(Cooperative Information Systems)(Cooperative Information Systems)Master in Software Engineering & Artificial IntelligenceMaster in Software Engineering & Artificial Intelligence

Group-32011

Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface

Technology

A Taxonomy of Semantic Web data Retrieval Techniques

IFRS AU Taxonomy 2012 Guide - sbr.gov.au · Web viewThe release of the taxonomy guide for the IFRS AU Taxonomy 2013. This version of the taxonomy includes the IFRS Taxonomy 2013

A Survey on Web Spam Detection Methods: Taxonomy

A Functional Taxonomy of Computer-based Information Systemsimu.ntua.gr/sites/default/files/biblio/Papers/a-functional... · A Functional Taxonomy of Computer-based Information

Web Based Taxonomy Developer Yong Moon Lee KICPA,AICPA

Taxonomy of Rhinolophus simplex Andersen, 1905 (Chiroptera ...museum.wa.gov.au/sites/default/files/TAXONOMY OF... · 3Balitbang Zoologi (LIPI), Jalan Ir. H. Juanda 9, Bogor, Indonesia

Building Taxonomy of Web Search Intents for Name Entity Queries

Web Taxonomy Integration through Co-Bootstrapping

تقسيم البكتريا Taxonomy of Bacteriakau.edu.sa/Files/0001460/files/1822_taxonomy of... · Web viewتقسيم البكتريا Taxonomy of Bacteria بالرغم من أن

IAS Taxonomy Core FS Narrative Draft of 2003... · Web view2003/07/15 · Title IAS Taxonomy Core FS Narrative Draft Author XBRL International IAS Taxonomy Working Group Last modified

Web Spam Taxonomy - Stanford Universityinfolab.stanford.edu/~zoltan/presentations/taxonomy... · 2005. 5. 10. · Web Spam Taxonomy Zoltán Gyöngyi Hector Garcia-Molina. AIRWeb'05

Taxonomy-Aided Massive Relationship Extraction from the Web

Designing Templates Based on a Taxonomy of Innovative Itemsiacat.org/sites/default/files/biblio/cat07parshall.pdfassessments. This taxonomy will provide detail regarding the various

IAS Taxonomy Core FS Narrative Draft - XBRL€¦ · Web view2002/11/15 · Title IAS Taxonomy Core FS Narrative Draft Author XBRL International IAS Taxonomy Working Group Last modified

Taxonomy Tools - Taxonomy Strategies

Taxonomy of the genus Mabuya Reptilia, Squamata ...sciencepress.mnhn.fr/sites/default/files/articles/pdf/z...Taxonomy of the genus Mabuya (Reptilia, Squamata, Scincidae) in Venezuela

Web Spam Taxonomy

A Taxonomy for Web Site Privacy Requirements

Ecology and taxonomy of potentially toxic Pseudo-nitzschia ... Web viewEcology and taxonomy of potentially toxic Pseudo ... prepared SAX-cleaned ... Ecology and taxonomy of potentially

Semansys PPT layout masterarchive.xbrl.org/17th/sites/17thconference.xbrl.org/files/Semansys... · Web services GUI Business Applications 12 •Any taxonomy •Your own data •Easily