web sites ui taxonomy & design: an analysis on web sites user's interface
DESCRIPTION
TRANSCRIPT
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
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
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
5
1. Newspaper-typeInterface(NPT-I)
1. Newspaper-typeInterface(NPT-I)
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
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
8
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
9
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
10
2. Central grid-based Interface
(CGB-I)
2. Central grid-based Interface
(CGB-I)
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
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
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
14
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
15
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
16
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
17
3. Central item + comment list
Interface(CICL-I)
3. Central item + comment list
Interface(CICL-I)
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
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
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)
21
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
22
4. Upper menu + sections Interface
(UMS-I)
4. Upper menu + sections Interface
(UMS-I)
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
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
25
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
26
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
27
5. Bank-typeInterface(BKT-I)
5. Bank-typeInterface(BKT-I)
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
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
30
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
31
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
32
6. Wiki-typeInterface(WKT-I)
6. Wiki-typeInterface(WKT-I)
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
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
35
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
36
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
37
7. Mail-typeInterface(MLT-I)
7. Mail-typeInterface(MLT-I)
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
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
40
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
41
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
42
8. StandardInterface(STD-I)
8. StandardInterface(STD-I)
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
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
45
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
46
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
47
9. Mobile-FriendlyInterface(MBL-I)
9. Mobile-FriendlyInterface(MBL-I)
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
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
50
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
51
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
52
ConclusionsConclusions
53
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
54
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
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 Group-3 CS Dept. University of Malaga, SpainCS Dept. University of Malaga, Spain
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