Page 1
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
Computer Science DepartmentUniversity of Malaga, Spain
Group-32011
Page 2
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
Page 3
3
IntroductionIntroduction
Page 4
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
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 5
5
1. Newspaper-typeInterface(NPT-I)
1. Newspaper-typeInterface(NPT-I)
Page 6
6
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
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.1. Design Characteristics
1. Heading: name, adds & menu2. 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, SpainCS Dept. University of Malaga, Spain
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
Page 7
7
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
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
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 8
8
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 9
9
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 10
10
2. Central grid-based Interface
(CGB-I)
2. Central grid-based Interface
(CGB-I)
Page 11
11
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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.)
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, SpainCS Dept. University of Malaga, Spain
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
Page 12
12
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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)
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, SpainCS Dept. University of Malaga, Spain
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
Page 13
13
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
(Screenshot/s here)(Screenshot/s here)
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 14
14
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 15
15
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 16
16
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 17
17
3. Central item + comment list
Interface(CICL-I)
3. Central item + comment list
Interface(CICL-I)
Page 18
18
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
3.1. Design Characteristics
1. Central item
2. Below: List of comments
3.1. Design Characteristics
1. Central item
2. Below: List of comments
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 19
19
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
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
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 20
20
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
(Screenshot/s here)(Screenshot/s here)
Page 21
21
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 22
22
4. Upper menu + sections Interface
(UMS-I)
4. Upper menu + sections Interface
(UMS-I)
Page 23
23
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
4.1. Design Characteristics
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)
4.1. Design Characteristics
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
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
Page 24
24
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
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)
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 25
25
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 26
26
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 27
27
5. Bank-typeInterface(BKT-I)
5. Bank-typeInterface(BKT-I)
Page 28
28
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
5.1. Design Characteristics
1. Small dimensions2. Upper menu: types of users3. Central section: service/new4. Lateral sections: login, info
(services, coorporate)
5.1. Design Characteristics
1. Small dimensions2. Upper menu: types of users3. Central section: service/new4. Lateral sections: login, info
(services, coorporate)
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 29
29
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
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
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 30
30
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 31
31
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 32
32
6. Wiki-typeInterface(WKT-I)
6. Wiki-typeInterface(WKT-I)
Page 33
33
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
6.1. Design Characteristics
1. Spacious2. Content: text / images3. Up/left: navigation bars
(small, unflashy)4. Small header: reg/login, history5. Left bar: logo, menu & tools
6.1. Design Characteristics
1. Spacious2. Content: text / images3. Up/left: navigation bars
(small, unflashy)4. Small header: reg/login, history5. Left bar: logo, menu & tools
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 34
34
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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)
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)
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 35
35
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 36
36
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 37
37
7. Mail-typeInterface(MLT-I)
7. Mail-typeInterface(MLT-I)
Page 38
38
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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.)
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, SpainCS Dept. University of Malaga, Spain
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
Page 39
39
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
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)
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 40
40
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 41
41
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 42
42
8. StandardInterface(STD-I)
8. StandardInterface(STD-I)
Page 43
43
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
8.1. Design Characteristics
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
8.1. Design Characteristics
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
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
Page 44
44
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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)
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, SpainCS Dept. University of Malaga, Spain
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
Page 45
45
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 46
46
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 47
47
9. Mobile-FriendlyInterface(MBL-I)
9. Mobile-FriendlyInterface(MBL-I)
Page 48
48
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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
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, SpainCS Dept. University of Malaga, Spain
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
Page 49
49
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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)
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, SpainCS Dept. University of Malaga, Spain
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
Page 50
50
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 51
51
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 52
52
ConclusionsConclusions
Page 53
53
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
Page 55
55
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) 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
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
Web Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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
Page 56
56
ReferencesReferences
Page 57
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
Page 58
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 Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
Page 59
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
Computer Science DepartmentUniversity of Malaga, Spain
Group-32011