Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface
-
Upload
juan-antonio-martin-checa -
Category
Technology
-
view
1.788 -
download
2
description
Transcript of Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface
![Page 1: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/1.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/2.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/3.jpg)
3
IntroductionIntroduction
![Page 4: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/4.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/5.jpg)
5
1. Newspaper-typeInterface(NPT-I)
1. Newspaper-typeInterface(NPT-I)
![Page 6: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/6.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/7.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/8.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/9.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/10.jpg)
10
2. Central grid-based Interface
(CGB-I)
2. Central grid-based Interface
(CGB-I)
![Page 11: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/11.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/12.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/13.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/14.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/15.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/16.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/17.jpg)
17
3. Central item + comment list
Interface(CICL-I)
3. Central item + comment list
Interface(CICL-I)
![Page 18: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/18.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/19.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/20.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/21.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/22.jpg)
22
4. Upper menu + sections Interface
(UMS-I)
4. Upper menu + sections Interface
(UMS-I)
![Page 23: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/23.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/24.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/25.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/26.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/27.jpg)
27
5. Bank-typeInterface(BKT-I)
5. Bank-typeInterface(BKT-I)
![Page 28: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/28.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/29.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/30.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/31.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/32.jpg)
32
6. Wiki-typeInterface(WKT-I)
6. Wiki-typeInterface(WKT-I)
![Page 33: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/33.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/34.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/35.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/36.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/37.jpg)
37
7. Mail-typeInterface(MLT-I)
7. Mail-typeInterface(MLT-I)
![Page 38: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/38.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/39.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/40.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/41.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/42.jpg)
42
8. StandardInterface(STD-I)
8. StandardInterface(STD-I)
![Page 43: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/43.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/44.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/45.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/46.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/47.jpg)
47
9. Mobile-FriendlyInterface(MBL-I)
9. Mobile-FriendlyInterface(MBL-I)
![Page 48: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/48.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/49.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/50.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/51.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/52.jpg)
52
ConclusionsConclusions
![Page 53: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/53.jpg)
53
1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. 1. WigdorWigdor 20102010 (Architecting ext(Architecting ext--Generation User Interfaces) Generation User Interfaces)
![Page 54: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/54.jpg)
54
![Page 55: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/55.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/56.jpg)
56
ReferencesReferences
![Page 57: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/57.jpg)
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: Web Sites UI Taxonomy & Design: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/58.jpg)
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: An Analysis on Web Sites User's Interface](https://reader035.fdocuments.us/reader035/viewer/2022081400/54829eed5806b5f2048b46a7/html5/thumbnails/59.jpg)
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