SlideShare a Scribd company logo

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

Juan Antonio Martin Checa, profile picture
Juan Antonio Martin Checa

The document presents a taxonomy of nine common web site user interface designs: Newspaper-type (NPT-I), Central grid-based (CGB-I), Central item + comment list (CICL-I), Upper menu + sections (UMS-I), Bank-type (BKT-I), Wiki-type (WKT-I), Mail-type (MLT-I), Standard (STD-I), and Mobile-friendly (MBL-I). Each interface type is defined by its characteristic design layout and navigation structure. Examples of popular websites that employ each interface type are provided.

Technology
1 of 59
Downloaded 17 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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 3
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) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 4
1. Newspaper-type Interface (NPT-I) 5
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 6
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 7
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 8
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 9
2. Central grid- based Interface (CGB-I) 10
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 2.1. Design Characteristics 1. Central Section: grid / thumbnails (new/popular items) 2. Upper, right, left: variable (categories, lists of relevant items, related adds, etc.) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 11
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 12
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) (Screenshot/s here) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 13
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 14
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 15
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 16
3. Central item + comment list Interface (CICL-I) 17
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 3.1. Design Characteristics 1. Central item 2. Below: List of comments Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 18
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 3.2. Examples 1. FAQ (Yahoo Answers) 2. Photos/videos (Flickr, social networks) 3. Articles (newspapers, blogs, magazines) 4. Products opinions Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 19
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) (Screenshot/s here) 20
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 21
4. Upper menu + sections Interface (UMS-I) 22
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 4.1. Design Characteristics 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 23
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 4.2. Examples 1. Software (Netbeans, Skype, Spotify, Firefox) 2. File hosting (RapidShare, Megaupload) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 24
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 25
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 26
5. Bank-type Interface (BKT-I) 27
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 5.1. Design Characteristics 1. Small dimensions 2. Upper menu: types of users 3. Central section: service/new 4. Lateral sections: login, info (services, coorporate) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 28
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 5.2. Examples 1. www.bancosantander.es 2. www.cajamadrid.es 3. www.lacaixa.es 4. www.unicaja.es 5. www.cajamar.es Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 29
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 30
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 31
6. Wiki-type Interface (WKT-I) 32
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 6.1. Design Characteristics 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 33
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 34
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 35
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 36
7. Mail-type Interface (MLT-I) 37
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 7.1. Design Characteristics 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.) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 38
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 7.2. Examples 1. WebMail (Hotmail, Gmail, Yahoo, Squirrel) 2. Forums (phpBB, vBulletin) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 39
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 40
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 41
8. Standard Interface (STD-I) 42
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 8.1. Design Characteristics 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 43
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 44
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 45
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 46
9. Mobile-Friendly Interface (MBL-I) 47
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 9.1. Design Characteristics 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 48
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 49
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 50
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 51
Conclusions 52
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 53
54
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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 55
References 56
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 Group-3 CS Dept. University of Malaga, Spain 58
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

More Related Content

PDF
Model-Driven Software Verification
Juan Antonio Martin Checa
 
PDF
Tactile Interfaces: Past, Present & Future
Juan Antonio Martin Checa
 
PDF
smartSpeed: online meeting tools
Juan Antonio Martin Checa
 
PDF
awSOA: Agents-based SOA for Wireless Sensor & Actor Networks
Juan Antonio Martin Checa
 
PDF
Weaving Variability into Domain Metamodels
Juan Antonio Martin Checa
 
PPT
HMSSC
Juan Antonio Martin Checa
 
PDF
eSOA: A Contextual Analysis on Service Oriented Architecture for Embeddded Ne...
Juan Antonio Martin Checa
 
PDF
The Sokoban Challenge: An Analysis on Past, Present, and Trends in Algorithms...
Juan Antonio Martin Checa
 
Model-Driven Software Verification
Juan Antonio Martin Checa
 
Tactile Interfaces: Past, Present & Future
Juan Antonio Martin Checa
 
smartSpeed: online meeting tools
Juan Antonio Martin Checa
 
awSOA: Agents-based SOA for Wireless Sensor & Actor Networks
Juan Antonio Martin Checa
 
Weaving Variability into Domain Metamodels
Juan Antonio Martin Checa
 
HMSSC
Juan Antonio Martin Checa
 
eSOA: A Contextual Analysis on Service Oriented Architecture for Embeddded Ne...
Juan Antonio Martin Checa
 
The Sokoban Challenge: An Analysis on Past, Present, and Trends in Algorithms...
Juan Antonio Martin Checa
 

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

PPTX
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptx
aliyafatimauwu
 
PPT
Interfaces
Andres Baravalle
 
PDF
Modelling the User Interface
Pedro J. Molina
 
PPTX
SDA-lecture-F5.pptx
Qasid Rajpoot
 
PPT
software-tools-part-1.ppt
SadiaZar1
 
PDF
ASIST - Data workshop 2007
Margaret Hanley
 
PDF
IUE Integrating UI Design Specs
Keith Instone
 
DOC
Scope
Videoguy
 
PPTX
Interface Selection Options.pptx
XanGwaps
 
PDF
Paper Alejandro Medrano - Use of hierarchical model-view-controller architect...
WTHS
 
KEY
Designing for the Unknown
Renato Feijó
 
PPT
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
Vivekananda Gn
 
PPT
WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
Vivekananda Gn
 
PPTX
Multi-Dimensional Context-Aware Adaptation of Service Front-ends
Jean Vanderdonckt
 
PPT
HCI 3e - Ch 8: Implementation support
Alan Dix
 
PPT
Model-based engineering of multi-platform, synchronous & collaborative UIs
Jean Vanderdonckt
 
PDF
GUI Web Designs.pdf
Sonia Simi
 
PPTX
uiux.pptx
KartikBhagwat5
 
PDF
Portfolio: Abhigyan Singh
abhigyan1107
 
PPT
Towards Canonical Task Types for User Interface Design
Jean Vanderdonckt
 
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptx
aliyafatimauwu
 
Interfaces
Andres Baravalle
 
Modelling the User Interface
Pedro J. Molina
 
SDA-lecture-F5.pptx
Qasid Rajpoot
 
software-tools-part-1.ppt
SadiaZar1
 
ASIST - Data workshop 2007
Margaret Hanley
 
IUE Integrating UI Design Specs
Keith Instone
 
Scope
Videoguy
 
Interface Selection Options.pptx
XanGwaps
 
Paper Alejandro Medrano - Use of hierarchical model-view-controller architect...
WTHS
 
Designing for the Unknown
Renato Feijó
 
WINSEM2022-23_SWE2004_ETH_VL2022230501954_2023-02-17_Reference-Material-I.ppt
Vivekananda Gn
 
WINSEM2021-22_SWE2004_ETH_VL2021220500570_2022-03-09_Reference-Material-I.ppt
Vivekananda Gn
 
Multi-Dimensional Context-Aware Adaptation of Service Front-ends
Jean Vanderdonckt
 
HCI 3e - Ch 8: Implementation support
Alan Dix
 
Model-based engineering of multi-platform, synchronous & collaborative UIs
Jean Vanderdonckt
 
GUI Web Designs.pdf
Sonia Simi
 
uiux.pptx
KartikBhagwat5
 
Portfolio: Abhigyan Singh
abhigyan1107
 
Towards Canonical Task Types for User Interface Design
Jean Vanderdonckt
 
Ad

Recently uploaded (20)

PDF
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Microsoft Dynamics
 
PDF
Getting Started with Data Integration: FME Form 101
Safe Software
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PDF
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
PDF
Enhancing emotion recognition model for a student engagement use case through...
IAESIJAI
 
PPTX
Chapter 5: Probability Theory and Statistics
RandyFin
 
PDF
Hindi spoken digit analysis for native and non-native speakers
IAESIJAI
 
PDF
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
PDF
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PDF
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
ry7r52mzb4
 
PPTX
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
PDF
Web App vs Mobile App What Should You Build First.pdf
KodekX
 
PPTX
cloud_computing_Infrastucture_as_cloud_p
mainakbhattacharya20
 
PPTX
TLE Review Electricity (Electricity).pptx
JayPolicarpio2
 
PDF
project resource management chapter-09.pdf
ssuser00e6e21
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Microsoft Dynamics
 
Getting Started with Data Integration: FME Form 101
Safe Software
 
Approach and Philosophy of On baking technology
30anthuong17
 
Encapsulation theory and applications.pdf
gurumoop
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
Enhancing emotion recognition model for a student engagement use case through...
IAESIJAI
 
Chapter 5: Probability Theory and Statistics
RandyFin
 
Hindi spoken digit analysis for native and non-native speakers
IAESIJAI
 
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
A Presentation on Artificial Intelligence
memembruh336
 
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
Univ-Connecticut-ChatGPT-Presentaion.pdf
ry7r52mzb4
 
Tartificialntelligence_presentation.pptx
ry7r52mzb4
 
Web App vs Mobile App What Should You Build First.pdf
KodekX
 
cloud_computing_Infrastucture_as_cloud_p
mainakbhattacharya20
 
TLE Review Electricity (Electricity).pptx
JayPolicarpio2
 
project resource management chapter-09.pdf
ssuser00e6e21
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Ad

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

  • 1. 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
  • 2. 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
  • 4. 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) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 4
  • 5. 1. Newspaper-type Interface (NPT-I) 5
  • 6. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 6
  • 7. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 7
  • 8. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 8
  • 9. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 9
  • 10. 2. Central grid- based Interface (CGB-I) 10
  • 11. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 2.1. Design Characteristics 1. Central Section: grid / thumbnails (new/popular items) 2. Upper, right, left: variable (categories, lists of relevant items, related adds, etc.) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 11
  • 12. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 12
  • 13. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) (Screenshot/s here) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 13
  • 14. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 14
  • 15. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 15
  • 16. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 16
  • 17. 3. Central item + comment list Interface (CICL-I) 17
  • 18. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 3.1. Design Characteristics 1. Central item 2. Below: List of comments Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 18
  • 19. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 3.2. Examples 1. FAQ (Yahoo Answers) 2. Photos/videos (Flickr, social networks) 3. Articles (newspapers, blogs, magazines) 4. Products opinions Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 19
  • 20. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) (Screenshot/s here) 20
  • 21. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 21
  • 22. 4. Upper menu + sections Interface (UMS-I) 22
  • 23. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 4.1. Design Characteristics 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 23
  • 24. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 4.2. Examples 1. Software (Netbeans, Skype, Spotify, Firefox) 2. File hosting (RapidShare, Megaupload) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 24
  • 25. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 25
  • 26. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 26
  • 27. 5. Bank-type Interface (BKT-I) 27
  • 28. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 5.1. Design Characteristics 1. Small dimensions 2. Upper menu: types of users 3. Central section: service/new 4. Lateral sections: login, info (services, coorporate) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 28
  • 29. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 5.2. Examples 1. www.bancosantander.es 2. www.cajamadrid.es 3. www.lacaixa.es 4. www.unicaja.es 5. www.cajamar.es Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 29
  • 30. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 30
  • 31. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 31
  • 32. 6. Wiki-type Interface (WKT-I) 32
  • 33. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 6.1. Design Characteristics 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 33
  • 34. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 34
  • 35. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 35
  • 36. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 36
  • 37. 7. Mail-type Interface (MLT-I) 37
  • 38. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 7.1. Design Characteristics 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.) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 38
  • 39. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 7.2. Examples 1. WebMail (Hotmail, Gmail, Yahoo, Squirrel) 2. Forums (phpBB, vBulletin) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 39
  • 40. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 40
  • 41. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 41
  • 42. 8. Standard Interface (STD-I) 42
  • 43. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 8.1. Design Characteristics 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 43
  • 44. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 44
  • 45. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 45
  • 46. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 46
  • 47. 9. Mobile-Friendly Interface (MBL-I) 47
  • 48. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 9.1. Design Characteristics 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 48
  • 49. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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) Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 49
  • 50. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 50
  • 51. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 51
  • 53. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 53
  • 54. 54
  • 55. 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) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 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 Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 55
  • 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://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
  • 58. 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 Group-3 CS Dept. University of Malaga, Spain 58
  • 59. 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