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

Web Sites UI Taxonomy
Web Sites UI Taxonomy
& Design
& Design
Cazorla, L., García Pascual, G., Martin Checa, J.A.,
Cazorla, L., García Pascual, G., Martin Checa, J.A.,
Ruiz Montiel, M.
Ruiz Montiel, M.
(Cooperative Information Systems)
(Cooperative Information Systems)
Master in Software Engineering & Artificial Intelligence
Master in Software Engineering & Artificial Intelligence

Computer Science Department
University of Malaga, Spain
Group-3
2011
2011

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

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

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

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

Introduction

- Taxonomy: ”the practice and science of
classification”

- Many web pages share the same layout or user
interfaces

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

1. Newspaper-type
Interface
(NPT-I)

5



1.1. Design Characteristics

1. Heading: name, adds & menu
2. Central section: news (1, 3, 4 col)
3. Right section: brief news, adds &
relevant sections




1.2. Examples

1. Newspapers
El País, El Mundo, Marca, 20 Minutos, The Times
2. Magazines
Hola, Cosmopolitan, Hello, National Geographic
3. Leisure
www.librosgratis.org, www.labutaca.net



8


9

2. Central grid-
based Interface
(CGB-I)

10




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

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




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)



14


15


16

3. Central item +
comment list
Interface
(CICL-I)
17




1. Central item

2. Below: List of comments




3.2. Examples

1. FAQ (Yahoo Answers)
2. Photos/videos (Flickr, social
networks)
3. Articles (newspapers, blogs,
magazines)
4. Products opinions


(Screenshot/s here)

20


21

4. Upper menu +
sections Interface
(UMS-I)

22




1. Upper menu: access to sections
2. Main body: 2 horizontal sections
3. Section-1: main service
(download, purchase, upload)
4. Section-2: product/service info
(rows/columns)



4.2. Examples

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

2. File hosting (RapidShare, Megaupload)



25


26

5. Bank-type
Interface
(BKT-I)

27




1. Small dimensions
2. Upper menu: types of users
3. Central section: service/new
4. Lateral sections: login, info
(services, coorporate)




5.2. Examples

1. www.bancosantander.es
2. www.cajamadrid.es
3. www.lacaixa.es
4. www.unicaja.es
5. www.cajamar.es



30


31

6. Wiki-type
Interface
(WKT-I)

32




1. Spacious
2. Content: text / images
3. Up/left: navigation bars
(small, unflashy)
4. Small header: reg/login, history
5. 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)
(http://jupiter.lcc.uma.es/siette.wiki.es/index.php/Portada)



35


36

7. Mail-type
Interface
(MLT-I)

37




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)



40


41

8. Standard
Interface
(STD-I)

42




1. Heading: name, banner & menu
2. Central Section: wider, includes text or
a messages list
3. Left: navigation links / form
4. Right: less relevant links or ads
5. Bottom: optionally, some important
links



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

9. Mobile-Friendly
Interface
(MBL-I)

47




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)



50


51


53



Conclusions
9 different categories can be used as an UI taxonomy
for web pages

Based on the layout and structure of web pages
web

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


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://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.htm
http://www.pcworld.com/article/127116/the_25_worst_web_sites.html

57

You might be thinking...
You might be thinking...
Now you can
Now you can
impress your
impress your
friends talking
friends talking
about web sites UI
about web sites UI
taxonomy & design
taxonomy & design
please, ask!
please, ask!


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

Recommended

Recommended

More Related Content

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

Similar to Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface (20)

Recently uploaded

Recently uploaded (20)

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