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

1,934 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,934
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Web Sites UI TaxonomyWeb 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 IntelligenceMaster in Software Engineering & Artificial Intelligence Computer Science Department University of Malaga, Spain Group-3 2011 2011
  2. 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 ConclusionsWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 2
  3. 3. Introduction 3
  4. 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 pagesWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 4
  5. 5. 1. Newspaper-type Interface (NPT-I) 5
  6. 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 sectionsWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 6
  7. 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.netWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 7
  8. 8. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 8
  9. 9. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 9
  10. 10. 2. Central grid-based Interface (CGB-I) 10
  11. 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. 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. 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. 14. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 14
  15. 15. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 15
  16. 16. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 16
  17. 17. 3. Central item + comment list Interface (CICL-I) 17
  18. 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 commentsWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 18
  19. 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 opinionsWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 19
  20. 20. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) (Screenshot/s here) 20
  21. 21. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 21
  22. 22. 4. Upper menu +sections Interface (UMS-I) 22
  23. 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. 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. 25. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 25
  26. 26. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 26
  27. 27. 5. Bank-type Interface (BKT-I) 27
  28. 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. 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.esWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 29
  30. 30. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 30
  31. 31. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 31
  32. 32. 6. Wiki-type Interface (WKT-I) 32
  33. 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 & toolsWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 33
  34. 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. 35. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 35
  36. 36. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 36
  37. 37. 7. Mail-type Interface (MLT-I) 37
  38. 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. 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. 40. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 40
  41. 41. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 41
  42. 42. 8. Standard Interface (STD-I) 42
  43. 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 linksWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 43
  44. 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. 45. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 45
  46. 46. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 46
  47. 47. 9. Mobile-Friendly Interface (MBL-I) 47
  48. 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 formsWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 48
  49. 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. 50. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 50
  51. 51. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 51
  52. 52. Conclusions 52
  53. 53. 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 1. Wigdor 2010 (Architecting ext-Generation User Interfaces) 53
  54. 54. 54
  55. 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 usersWeb Sites UI Taxonomy & Design Group-3 CS Dept. University of Malaga, Spain 55
  56. 56. References 56
  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.htmhttp://webdesign.about.com/od/webdesignbasics/Principles_of_Web_Design.htmhttp://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 57
  58. 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. 59. Web Sites UI TaxonomyWeb 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 IntelligenceMaster in Software Engineering & Artificial Intelligence Computer Science Department University of Malaga, Spain Group-3 2011 2011

×