Weitere ähnliche Inhalte Ähnlich wie Information Architecture: Part 2 - Spring 2013 - Class 4 (20) Kürzlich hochgeladen (20) Information Architecture: Part 2 - Spring 2013 - Class 42. 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
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. 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
Today’s Class
• Creating a Web Style Guide
• Icons/Expression in Design
• Localization 101
• Change Management
• Creating a Functional Specification for Your CMS
Also:
• 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. 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
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 forms
I 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. 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
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. 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
Creating a Web Style Guide
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
7. 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
Web Style Guide
What 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. 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
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. 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
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. 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
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. 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
What a Typical Style Guide Covers
The 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. 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
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 “do's and don'ts”
• Contact Information
If it exists, the Web Style Guide ought to take any of these
elements 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. 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
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. 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
What to Present
When 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. 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. 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
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. 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
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. 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
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. 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 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. 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
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. 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
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. 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 Policies
In 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. 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/Obligations
Institutional policies may also need to be noted (particularly
for gov't 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. 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
External Resources for Help
In many cases have to assume that content control is
decentralized; make sure you provide links to external
reference sources
This can include:
• HTML/CSS/CMS tutorials
• (X)HTMLValidators
• Writing for the Web (“Elements of Style”, Chicago Manual
of Style, etc)
• Outlines on accessibility and usability
Where 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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
Icons/Expression in Design
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
33. 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
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. 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
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. 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
Icons
Problem 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. 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
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. 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
Scott McCloud’s Take On It..
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
38. 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
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. 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
Pictures and Words
• Pictures…
• Words…
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
40. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
Some Guidelines for Effective Road Signs
• From U.S. Dept. of
Transportation's
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
Expression in Design
• How about this one?
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
59. 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
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. 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 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. 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
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. 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
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. 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
Don Norman’s 3 Levels of Emotional Design
Visceral: Hard-wired, low-level, triggered immediately, based
on evolutionary advantages and survival strategies; most
graphic design elements aim to work at this level
Examples:
• 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. 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
Don Norman’s 3 Levels of Emotional Design
Behavioural: 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. 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
Don Norman’s 3 Levels of Emotional Design
Reflective: 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. 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
Take a Look at this Web Page
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
67. 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
Now, Read This Comic Strip
• Notice any similarities?
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
68. 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
Time
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
69. 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
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. 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
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. 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 Internationalization
In 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.com
An English article on Wikipedia: en.wikipedia.org/wiki/Paul_Kane
The 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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
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. What's 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. 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
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. 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
DIY Localization Approach
Pro:
• Uses internal SMEs
• Internal deadlines
• Info never leaves the organization (until ready)
Con:
• Fragile
• Doesn't scale well
• Expensive
Not surprisingly, most firms/organizations outsource this type
of work
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
81. 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
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. 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
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. 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
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. 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
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. 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
Top 10 Internet Languages
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
86. 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
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. 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: 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. 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
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. 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
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. 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
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. 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
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. 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
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. 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
Change Management
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
94. 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
Managing Change as an IA
Managing 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. 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
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. 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
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. 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
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. 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
Communicate
Need 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 problems
But in the end: communicate, communicate, communicate.
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
99. 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
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. 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
Overcoming Resistance
Typical 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. 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
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. 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
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. 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
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. 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
Intervention Stages in Change Management
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
105. 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
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. 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 project
From “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. 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
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. 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
Vendor Features are Not Necessarily Needs
Vendor 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. 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
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
110. 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
Functional Specification
Functional specification is an approach to selecting
tools and vendors:
• Define what the system should do
• Ignore how the system accomplishes this
• Specific functional specification is good, but only
about what, never how
• Your vendor knows more about how than you do
• You know more about what than your vendor does
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2
111. 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
Be Indifferent to Mechanism
• Don't care how the requirement is met as long as it
is met
• You might, later, care about how from a cost
perspective, but from a design perspective, if it
works, it works.
So if… what do you do?
Keith Schengili-Roberts
Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2