Your SlideShare is downloading. ×
Information Architecture: Part 2           Class #4               Keith Schengili-Roberts Copyright © 2013, The iSchool In...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                  Icons/Expression in DesignInformation Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                 Icons/Expression in Design Information Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                  Icons/Expression in DesignInformation Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                 Icons/Expression in Design Information Architec...
Creating a Web Style Guide                                                 Icons/Expression in Design Information Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                    Icons/Expression in DesignInformation Archit...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                  Icons/Expression in DesignInformation Architec...
Creating a Web Style Guide                                                       Icons/Expression in DesignInformation Arc...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in Design Information Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                  Icons/Expression in DesignInformation Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                 Icons/Expression in DesignInformation Architect...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                  Icons/Expression in DesignInformation Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                 Icons/Expression in Design Information Architec...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Creating a Web Style Guide                                                Icons/Expression in DesignInformation Architectu...
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Information Architecture: Part 2 - Spring 2013 - Class 4
Upcoming SlideShare
Loading in...5
×

Information Architecture: Part 2 - Spring 2013 - Class 4

723

Published on

The slidedeck for the fourth and final class of the Information Architecture course (Part 2) I teach at the University of Toronto's iSchool. This class covers:
- Creating a Web Style Guide
- Icons/Expression in Design
- Localization 101
- Change Management
- Creating a Functional Specification for Your CMS

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

No Downloads
Views
Total Views
723
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Information Architecture: Part 2 - Spring 2013 - Class 4"

  1. 1. Information Architecture: Part 2 Class #4 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
  2. 2. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Instructor Keith Schengili-Roberts keith.schengili.roberts@utoronto.ca Class #4 February 14, 2013 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
  3. 3. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Today’s Class• Creating a Web Style Guide• Icons/Expression in Design• Localization 101• Change Management• Creating a Functional Specification for Your CMSAlso:• Assignment #1 is due February 28th (two Thursdays hence)• Assignment #2 is due on March 7th 2013 (the following Thursday) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  4. 4. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Class Assessment Forms• Please fill out the yellow forms that have been handed out; I have made significant changes to the course based on recommendations from these formsI would particularly like to know the following:• More/Less in-class work? Was it effective?• Would you have preferred a longer course/more time?• Were there any major topics you think ought to have been covered? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  5. 5. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Some Additional Info• Found in a LinkedIn forum: Interaction Design templates for Personas and Concept Designs: www.ida.liu.se/~matar/tools.en.sht ml (or bit.ly/7TyG0k)• A very good presentation about the prototyping/wireframing process: http://www.slideshare.net/runger/th e-right-way-to-wireframe-cidd- chicago-february-6-2013 (or slidesha.re/Xf8gez) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  6. 6. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Creating a Web Style Guide Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  7. 7. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Web Style GuideWhat is it?• It is the “bible” containing the rules and styles used on your Web site; aim is to achieve consistency in usage of the style on the Web site• If you think of the sitemap as the “blueprint” for your Web site, the Style Guide describes in details the materials that go into building that blueprint Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  8. 8. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Style Guide Origins• Ultimately derived from writing style guides that dictated how individual writers could conform to the “house style” of writing for a newspaper or for a corporation• Still used today; can incorporate portions of The Elements of Style or the Chicago Manual of Style when it comes to writing styles to define Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  9. 9. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Good Web Style Guide Reference• Web Style Guide, 3rd Edition, by Patrick J. Lynch and Sarah Horton• Available in print and online at: webstyleguide.com Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  10. 10. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Why Do You Need It?• Helps to ensure a unified “look and feel” to a Web site • For any team involving more than one Web contributor, this is a necessity, and is considered a standard IA deliverable• Is usually the “final deliverable” by an IA for a given site or project; typically issued alongside a Web site launch (or soon after)• It is a chance for you to communicate how and why certain (IA-based) design decisions were made• When something goes horribly wrong, you have something canonical to refer to (“no, Comic Sans is not one of our accepted corporate fonts”)• Much of the materials in a style guide are based on IA principles, so makes the most sense to work on one incrementally Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  11. 11. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS What a Typical Style Guide CoversThe following are considered to be “core” requirements for a typical style guide:• Basic layout and design (including navigation, IA principles on labelling, taxonomic principles at work, etc)• Identifying distinct parts of the wireframe design (header, footer, breadcrumbs, etc)• Colour scheme (colours to use and when and where to use them)• Fonts (again, when and where to use them)• Accessibility/Usability requirements Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  12. 12. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS What a Typical Style Guide Covers (cont)• Logo usage/guidelines• Legal Requirements• How to use images (file types, colour palettes, max. dimensions, etc)• Content guidelines (this can include writing styles, at the very least “dos and donts”• Contact InformationIf it exists, the Web Style Guide ought to take any of theseelements that already exist from the corporate branding guideline,either merging or amending it with web-specific material Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  13. 13. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Additional Guidelines• Metadata guidelines• Forms and table formatting• Multimedia guidelines (similar to images in terms of formatting, if interactive refer to accessibility guidelines)• Specific scripting/coding instructions (HTML/CSS/JavaScript etc)• Database or CMS restrictions (i.e. filenames or filename length) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  14. 14. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS What to PresentWhen describing a particular aspect to be covered, do the following:• Provide a guideline; should cover context for usage (i.e. “use on 2nd level pages only”)• Show examples (what to do)• Show counter-examples (what not to do) • Use code or images, as applicable• If there are exceptions, provide an example Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  15. 15. Creating a Web Style Guide Icons/Expression in Design Information Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Example: Logo Usage• Guidelines may already exist from corporate style guide (if one exists)Example: www.usr.com/download/adbuilder/logos/brand-guidelines.pdf Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  16. 16. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Logo Usage (cont)• Spacing around logo• Linking + alt tags• Minimum size• Valid colour combinations (may be combined with corporate Web palette info) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  17. 17. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Logo Usage (cont)• Add counter examples: • From: I Love New York Branding Guidelines• WestJet example (no longer extent) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  18. 18. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Template Usage• Often there are Web designs where each “level” of page gets its own template• Users need to know the distinctions between homepage/2nd-level/3rd- level pages and what can/cannot be done• Recycle your wireframes here! ;-) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  19. 19. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Example from: channel4.com/about_c4/styleguide/downloads/C4StyleGuide1.1.pdf Colour Usage• Explicitly reference the colors that can be used on the site, specified in RGB or Hex • If an existing print guideline exists, borrow from it• Specify any preferred Example from EasyGroup’s Branding Guide primary and secondary colours to use, and colour combinations not to use Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  20. 20. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Page Sizing and Columnar Layout• Need to settle on an optimal page width• Provide guidelines on structuring sections based on your wireframes (example below from BBC) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  21. 21. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Font Usage• State font usage clearly: which font(s) and how/when they are to be used• Also consider related factors like leading (space above/below) text/image elements (examples below from BBC) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  22. 22. Creating a Web Style Guide Icons/Expression in Design Information Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Process PoliciesIn addition to standardizing Web layout, may also need to keep in mind any institutional processes that come into play:Examples:• File naming conventions• Review cycle, such as determining when material is deemed obsolete (and what happens next)• Outline steps required in getting content onto the Web site (who are the gatekeepers/approvers, set expectations in terms of timing, etc)• Ownership of content• Localization policies, and their impact on process/timing Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  23. 23. Creating a Web Style Guide Icons/Expression in Design Information Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Legal Policies/ObligationsInstitutional policies may also need to be noted (particularly for govt or related bodies):Examples:• Legal, media relations statements/implications• Usability policies in place; explicitly reference any external or internal policies that may be applicable• Legal guidelines surrounding use of graphics/images (i.e. copyright restrictions) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  24. 24. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS External Resources for HelpIn many cases have to assume that content control is decentralized; make sure you provide links to external reference sourcesThis can include:• HTML/CSS/CMS tutorials• (X)HTMLValidators• Writing for the Web (“Elements of Style”, Chicago Manual of Style, etc)• Outlines on accessibility and usabilityWhere possible, insert these references within pertinent sections of the Style Guide Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  25. 25. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Other Things to Consider: Button States• Shows how a button should appear in a “natural” state, when moused-over, clicked or inactive Gumtree.com’s button states Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  26. 26. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Other Things to Consider: Picture Usage• Show typical examples of any photographic images used on the website, describing the intent you are trying to convey when using them Example from EasyGroup’s Branding Guide Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  27. 27. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Other Things to Consider: Writing Style• Should not only reference (IA) Best Practices, but provide examples of the style being aimed for Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  28. 28. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Other Things to Consider: Icon Usage• Good place to reference any standard icons in use on the site, and what standard sizes can be used Example from Zurb.com’s flickr stream: flickr.com/photos/zurbinc/4774579941/in/photostream/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  29. 29. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Other Things to Consider: Coding Guidelines• File naming conventions (i.e. camelCase.html or words_with_underlines.html)• The directory structure for the website• Valid and invalid file types (i.e. PDF good, Flash bad)• Inserting third-party applications (i.e. YouTube window)• Validation requirements for web pages (i.e. which HTML/CMS validation checker to use?)• Version control• Working with test server Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  30. 30. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS An Excellent Web Style Guide Example• static.bbci.co.uk/gel/0.2.14/downloads/GEL_web_styleguide.pdf Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  31. 31. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Need Some Additional Examples?• University of Pennsylvania Web Style Guide: upenn.edu/webguide/style_guide/index.html• World Meteorological Organization: wmo.int/pages/pubsguides/documents/WMOWEB_STYLE_GUIDE _08.pdf• A Style Apart: alistapart.com/contribute/styleguide/• Seagate Web Style Guide: www.amazedev.com/files/guidelines/seagete_web_style_guide.pdf• Heriot Watt University: www.hw.ac.uk/webteam/training/style.htm• The New School: www.newschool.edu/webstyleguide/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  32. 32. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Icons/Expression in Design Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  33. 33. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Icons/Expression in Design • An excellent guide to iconography: Understanding Comics, by Scott McCloud (1993) • “More than just a book about comics, this gets to the heart of how we deal with visual languages in general.” Lou Rosenfeld Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  34. 34. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Icons• Definition: “A small graphic symbol that represents a program, file, or folder on a computer. Clicking on an icon with a mouse generally causes the program to run, the folder to open, or the file to be displayed (if possible). ” University of Washington Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  35. 35. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS IconsProblem is, what to use?• Text-only?• Picture-only?• Text and picture? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  36. 36. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS But first…• What is this?(“The Treachery Of Images” by Rene Magritte) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  37. 37. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Scott McCloud’s Take On It.. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  38. 38. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS The World of Iconic Representation • Icons are ultimately visual representations of actual things or actions. • The best icons are those that are “received” rather than “perceived” Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  39. 39. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Pictures and Words • Pictures… • Words… Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  40. 40. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Pyramid of Visual Iconography • Top: Most abstracted • Bottom: Most specific, running along a spectrum from received to perceived • In good UI design, you want to aim for something that is immediate and as specific as possible • Tradeoffs are inevitable… Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  41. 41. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Abstracted Icons• Can you tell me what these icons represent? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  42. 42. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS The Same Icons in Context • Notice how the accompanying text at the bottom provides the most information (through context) • Do you think these are effective icons (or labels)? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  43. 43. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Another Example• Can you tell me what these icons represent? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  44. 44. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS The Same Icons in Context• So do you think these are effective icons? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  45. 45. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Images Should Not Get in the Way of Reception• Are the drop-down icons in this instance useful? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  46. 46. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Importance of Context • Do you think these icons are talking about the same thing? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  47. 47. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Some Guidelines for Effective Road Signs• From U.S. Dept. of Transportations Human Centered Systems Research Program (www.tfhrc.gov/hu manfac/00-090.pdf)• These examples nicely illustrates “Received” vs. “Perceived” design Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  48. 48. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Some Guidelines for Effective Road Signs• In each of these examples, context becomes more important; meaning dependent on when or where you encounter them Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  49. 49. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Guidelines for Creating Effective Icons (Software)• Rule of Thumb for Icon Metaphors: "If you have to think about an icon to get it, the metaphor is too complex”• Design Functionally Suggestive Icons; image should suggest function• Avoid name suggestive icons; introduces an extra layer of extraction• Do not rely on information user’s may not have; icon may have internal meaning only• Avoid extraneous information; i.e. don’t make it “busy”• Don’t base icons off of word puns, i.e. a “system log” icon shouldn’t be “wood-y”, is also language-specific Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  50. 50. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Fitts’ Law of Click Times• “The time to acquire a target is a function of the distance to and size of the target”. Bruce Tognazzini• Use large objects for important functions (Big buttons tend to be easier to click). Note that this follows a log function, so utility of making an already large button 20% larger than a smaller one is not equal Terrific article on Fitts’ Law (from which this illustration is derived) at: sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  51. 51. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Fitts’ Law of Click Times (Cont.) Fitts’ Law of Click Times (Cont.)• It also predicts that the corners and sides of your display are faster to click on because you cannot go “past” them; however in reality this is not the case; however you can place buttons close to where you expect the cursor to appear on a page• In this case note the relatively large button at the top, which is close to where you would expect the cursor to be after entering an URL/clicking a bookmark Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  52. 52. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Fitts’ Law of Click Times (Cont.)• The further the cursor has to travel to click on an object, the more likely it is prone to error• Want to provide the user with most likely/primary options close to the “prime pixel”, an effect most often used in context-sensitive drop-down UIs• In terms of Web development, it is either where you expect the cursor to be (i.e. place button-clicking actions on multiple pages close to each other), or roughly the center of the screen Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  53. 53. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Fitts’ Law of Click Times (Cont.)• By connecting navigation items together, they become larger and easier to use; example on the right provides a seamless transition between “Home” and “Blog”, whereas the one on the left has an intermediate “dead zone” Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  54. 54. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Fitts’ Law: Spot Quiz• Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least one reason why labelled tools can be accessed faster. (Assume, for this, that the user knows the tool and does not need the label just simply to identify the tool.)• What is the bottleneck in hierarchical menus and what technique used on the Macintosh, but not on Windows (prior to Windows 7), which makes that bottleneck less of a problem? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  55. 55. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Fitts’ Law: Answers• The label becomes part of the target. The target is therefore bigger. Bigger targets, all else being equal, can be accessed faster.• The bottleneck is the passage between the first-level menu and the second-level menu. Using Windows, users have to slide across just right, in case they slip down to the next menu at the last moment. Macs use a V-shaped buffer zone, so that users could make an increasingly-greater error as they neared the hierarchical without fear of jumping to an unwanted menu.• Other questions/answers can be found at: www.asktog.com/columns/022DesignedToGiveFitts.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  56. 56. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Expression in Design Both images depict faces, but very differently: • Busy / Clean • Strong Emotion / Calmness • Edgy and Gritty / Thoughtful Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  57. 57. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Expression in Design• So what is this Web homepage trying to convey? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  58. 58. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Expression in Design• How about this one? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  59. 59. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Why this Matters: Confidence, Trust• Would you implicitly trust sites that looked like this? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  60. 60. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS A Less Extreme Example• This is a site in the financial domain; what’s good/bad about it?• Compare this version (from early 2011) to how it looks today Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  61. 61. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Emotional Design• Classic text on this topic; while focus is more on industrial design, concepts are universal Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  62. 62. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Don Norman’s 3 Levels of Emotional Design• Visceral• Behavioural• Reflective• Excellent YouTube video of him speaking on “The three ways that good design makes you happy”: www.youtube.com/watch?v=RlQEoJaLQRA&NR=1 (start from 6:43) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  63. 63. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Don Norman’s 3 Levels of Emotional DesignVisceral: Hard-wired, low-level, triggered immediately, based on evolutionary advantages and survival strategies; most graphic design elements aim to work at this levelExamples:• smooth, round = pleasant• spiders/multi-legged critters = creepy• sharp, pointed = fear/danger• babies = protective Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  64. 64. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Don Norman’s 3 Levels of Emotional DesignBehavioural: based on feel/use of an object; is an icon/feature good or bad to use?• Usability is aimed at this level• Example: lengthy response times can cause confusion/frustration Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  65. 65. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Don Norman’s 3 Levels of Emotional DesignReflective: based upon how we think about an object. Does it evoke trust or perhaps prestige?• Branding works at this level.• For more information on this topic, see: jnd.org/dn.mss/CH01.pdf (a sample chapter from the book) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  66. 66. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Take a Look at this Web Page Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  67. 67. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Now, Read This Comic Strip• Notice any similarities? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  68. 68. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Time Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  69. 69. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Time• Now think back to the Chapters.ca web page (or any other) and look at the design in terms of time Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  70. 70. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Eyetracking Studies Support This• Eyetracking studies (sample to right) shows a user searching for information on a Google page (derived from “Eyetracking Web Usability” by Jakob Nielsen and Kara Pernice) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  71. 71. Creating a Web Style Guide Icons/Expression in Design Information Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Flow and InternationalizationIn the vast majority of cases, Western Websites “flow” their information from right-to-left, top-to-bottom• What does that remind you of?Look at the flow in the following non-English Web sites:• www.jal.co.jp• www.keshet-tv.com• www.alquds.comAn English article on Wikipedia: en.wikipedia.org/wiki/Paul_KaneThe equivalent article on the Hebrew text version: he.wikipedia.org/wiki/%D7%A4%D7%95%D7%9C_%D7%A7%D7 %99%D7%99%D7%9F Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  72. 72. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Localization 101• A (not serious) possible solution to the “flags” issue, from a presentation by Peter van Dijck Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  73. 73. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Localization Issues and IA• An IA needs to be aware of the issues surrounding localization, some examples: • Languages and countries do not correspond one-to-one, so how do you denote different language sections on a Web site? (Flag? Text?) • Categories/Taxonomies are culturally-specific, a straightforward translation often does not work • Domain names are expanding outside of Latin-1 alphabet; so what is your domain name in Simplified Chinese, for example?• Understanding the mechanics and localization best practices will go a long way towards helping to get a better grasp on the issues you may face Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  74. 74. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Translation, Localization and Internationalization• “Translation” is taking material from one language and converting it to another• “Localization” takes into consideration the local idiom, and ought to sound like it is coming from a native speaker• “Internationalization” is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes• Will often see these terms used interchangeably Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  75. 75. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Localization Industry Terminology 101• HT - Human Translation (as opposed to “MT”)• GSB - Globalization Service Buyers• LSP - Language/Localization Service Provider• MLV - Multi-Language Vendor• MT/MTS - Machine Translation/MT System• SLV - single-language vendor• TEP - Translate-Edit-Proofread process (typical of most LSPs)• TEPR - Translate-Edit-Proofread-Review process• TM - Translation Memory• TMS – Terminology Management System Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  76. 76. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Mistranslations• Potential cost to brand/lost sales/credibility• And What Does it Mean in Farsi? Time Magazine article about localization blunders time.com/time/magazine/article/0,9171,184974,00.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  77. 77. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Reasons for Doing Localization• Provide info to non-English speakers (in an otherwise English locale)• Access to foreign markets/enhance brand• Better communication with clients• Statutory requirement• Legal requirement in order to do business Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  78. 78. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Do End Users Really Care?• “Business users on the web are three times more likely to buy from sites in their native language and stay two times longer on sites in their own language. Whats more, a full 76% of all web users who encounter sites not in their native language either look for a translated version or leave the site.”Source: www.i-b-t.net/anm/anmviewer.asp?a=220&z=3&print=yes based on Forrester Research report Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  79. 79. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Approaches to Localization• DIY (in-house)• Send to a Localization Service Provider (LSP) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  80. 80. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS DIY Localization ApproachPro:• Uses internal SMEs• Internal deadlines• Info never leaves the organization (until ready)Con:• Fragile• Doesnt scale well• ExpensiveNot surprisingly, most firms/organizations outsource this type of work Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  81. 81. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Size of the Localization Industry• According to an estimate from Common Sense Advisory, outsourced localization and translation market ~$12 US billion as of 2010• To put this into perspective, this is about the same size as the global bicycle manufacturing market• Source: gilbane.com/globalization/2007/02/wh at_size_the_market.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  82. 82. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Top Localization Firms (2007 Data)• Source: http://www.commonsenseadvisory.com/AbstractView.aspx?ArticleID=948 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  83. 83. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS How Many Languages to Localize To?• Ultimately depends on needs• May be sufficient to localize to a single language (i.e. French for sellers into Canadian market)• “Standard 9" (4 European languages, 4 Asian languages plus English)• MS Vista Tier 1 = 36 languages• MS Vista Tier 2 = 62 additional languages Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  84. 84. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Dialects• May need to keep in mind dialectal translation may be required for certain markets: Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  85. 85. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Top 10 Internet Languages Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  86. 86. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Cultural Bias in Classification• There are many formal classification systems which contain "hidden" biases; need to be aware of them• One example: Dewey Decimal system; 200s dedicated to religion, and is heavily biased (image taken from a Peter van Dijck presentation) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  87. 87. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Example: Car Classification• Note differences in car categorization (example taken from a presentation by Peter van Dijck) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  88. 88. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Think Global, Act Local(e)• The way people classify “global” categories tends to be locally biased • Note that UE/IA-based design has tended to be largely Western in its approach; some “global” principles may not apply (global Yahoo examples)• If moving into a new locale/region, research local differences; examine other global players for hints Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  89. 89. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Flags = Language/Region(?)• Careful when using flag icons• For English language, what do you use: UK, US, Canadian flag (or a combo)?• What does the following signify? • Taiwan and Mainland China? • Traditional Chinese and Simplified Chinese?• This distinction is even more problematic when signifying spoken languages• When using language names, use native spellings (i.e. “Deutsch” not “German”, “Française” not “French”) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  90. 90. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Localization Maturity Model• Source: Common Sense Advisory, Inc., see: www.gala-global.org/GALAxy- article-localization_maturity_model-5955.html for summary• Where does your organization fit along this scale? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  91. 91. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Choosing a Localization Vendor• Devise a requirements document, detailing formats, language requirements and process expectations• Obtain pricing guide outlining all fees• Ask for sample translation(s) which can be verified for quality• Vendors often specialize in per-industry segments, such as pharmacological, “high tech” or aerospace; choose accordingly Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  92. 92. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Localization Information• Common Sense Advisory: www.commonsenseadvisory.com• Multilingual: www.multilingual.com• Listing of localization vendors and tools: www.i18nguy.com/TranslationVendors.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  93. 93. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Change Management Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  94. 94. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Managing Change as an IAManaging Change:• If you are adopting a new CMS, will be a big change over existing processes; same is true for SharePoint deployment, Intranets, etc• Whatever the case, a change in platform requires its users to go through a paradigm shift in the ways they work.• As an IA (and a likely co-ordinator/champion of the process change), getting through this paradigm shift effectively requires understanding what to expect and how to come through it intact (this is “change management”). Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  95. 95. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Identify the Pain, Issues, and Consequences• People are unwilling to change unless there is a very good reason for that change and they can see the benefits.• Identifying the benefits means first identifying the pain, issues, and consequences.• What are the real issues facing your organization? What is the impact of not addressing these issues?• “The only person who is in favour of change is a baby with a wet diaper” (quote from The Art of Change Management in a Professional Organisation) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  96. 96. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Expect an Initial Productivity Dip• Anticipate the emotions you will encounter ahead of time and develop strategies to adapt Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  97. 97. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Reach Out and Listen• Listen to what people have to say about the issues and the solutions.• If you involve people early on, really listen to what they have to say, and then demonstrate that you are addressing their concerns/requirements, they may become your strongest supporters. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  98. 98. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS CommunicateNeed to communicate the following to users/stakeholders:• Explain why the change is happening• Describe the plan• Provide ongoing status updates• Celebrate successes• Do not downplay problemsBut in the end: communicate, communicate, communicate. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  99. 99. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Elicit the Help of “Change Agents”• The best way to convince people of a change is to have “one of their own” communicate the excitement and possibilities.• A “change agent” is someone who is not necessarily part of the assigned implementation team, but who will be a user of the new system and its methodologies.• Make sure that you help the change agents to prepare a consistent message to take back to their team. A consistent message reduces possible misinterpretations. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  100. 100. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Overcoming ResistanceTypical criticisms/comments:• Not invented here• We do it differently• Loss of creativity• There are benefits, but this is too much work• If fewer people can do more, I may lose my job Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  101. 101. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Why Some Projects Fail• Resistance to change• Failure to address both technical and non-technical issues• Failure to recognize that analysis and design take time• Lack of a champion• Biting off more than you can chew• Economic issues• Organizations lack core competencies Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  102. 102. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Why Some Projects Fail (cont)• Lack of communication• Failure to involve others• Relying on only one type of reuse• Project-by-project reuse• Selecting the wrong first project• Reuse everything you can• No facility for change Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  103. 103. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Changing Roles• New roles • Enterprise content coordinator • Information technologists• Modified roles • Business owners/analysts • Information architects • Authors • Content owners • Editors Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  104. 104. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Intervention Stages in Change Management Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  105. 105. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Creating a Functional Specification for Your CMS (or, Winning the Tug-of-War Between Customer Pull vs. Vendor Push) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  106. 106. Creating a Web Style Guide Icons/Expression in Design Information Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS A Sure Way to Fail…CMS selection may unfortunately be done before:• Determining the business needs and overall business goals• Identifying the underlying website design or management issues• Creating an overall website or intranet strategy• Identifying what functionality will be delivered by the site (rather than the CMS)• Choosing which sites will be in scope for the CMS projectFrom “Top 10 mistakes when selecting a CMS”, by James Robertson (steptwo.com.au/papers/kmc_selectionmistakes) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  107. 107. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Solution Features and Getting what You Need• Many ECM/CMS vendors in the marketplace; need to winnow a large list of potential vendors down to something easily manageable/testable• Vendors will approach you touting the various features for their solution; but do these features fit your needs? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  108. 108. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Vendor Features are Not Necessarily NeedsVendor features often come with hidden implications for the buyer:• May require additional headcount to manage• May force a negative change to your existing processes• May require third-party tools to operate effectively• Aim for a solution that best compliments/improves your existing processes Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  109. 109. Creating a Web Style Guide Icons/Expression in DesignInformation Architecture: Part 2 Localization 101 Class #4 Extras: Change Management / Creating a Functional Specification for Your CMS Winnowing Out Vendors• The number of choices is overwhelming; cmsmatrix.org/ currently lists over 1,100 CMS solutions• While it may be impossible to effectively survey all of these potential vendors in any detail, as the fewer products that are looked at means the greater the chance that the most appropriate solution has been missed• To get a better sense as to what you require, compile a Needs Analysis/Specifications Document Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2

×