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


Group-32011

2

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

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

3

IntroductionIntroduction

4

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

5

1. Newspaper-typeInterface(NPT-I)

1. Newspaper-typeInterface(NPT-I)

6


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

7


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

8


9


10

2. Central grid-based Interface

(CGB-I)

2. Central grid-based Interface

(CGB-I)

11



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

12


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)



13


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



14


15


16


17

3. Central item + comment list

Interface(CICL-I)

3. Central item + comment list

Interface(CICL-I)

18



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

19


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



20


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

21


22

4. Upper menu + sections Interface

(UMS-I)

4. Upper menu + sections Interface

(UMS-I)

23



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


24


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)



25


26


27

5. Bank-typeInterface(BKT-I)

5. Bank-typeInterface(BKT-I)

28



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)



29


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



30


31


32

6. Wiki-typeInterface(WKT-I)

6. Wiki-typeInterface(WKT-I)

33



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



34


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)



35


36


37

7. Mail-typeInterface(MLT-I)

7. Mail-typeInterface(MLT-I)

38



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.)



39


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)



40


41


42

8. StandardInterface(STD-I)

8. StandardInterface(STD-I)

43



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

links


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


44


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)



45


46


47

9. Mobile-FriendlyInterface(MBL-I)

9. Mobile-FriendlyInterface(MBL-I)

48



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



49


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)



50


51


52

ConclusionsConclusions

53


54

55


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



56

ReferencesReferences

57

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

58

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!

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


Group-32011

Technology

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