By the Book: Effective UI
                  Examining the Art of Building Great User Experiences in Software

                                                                     - John McRee




your user experience agency
title: Lead User Experience Architect
email: john.mcree@effectiveui.com
blog: www.johnmcree.com
twitter: @johnmcree


www.effectiveui.com
Microsoft             Apple              Adobe                Sun
 Strategic 20           iPhone         Gold 15 Partner        Java FX
Agency Partner   Preferred Developer                     Strategic Partner
Flash                 Vector Graphics                            MXML
          Client Processing                   Cover-flow
Java                          Service Oriented Architecture
         Silverlight
                         Animation            Social Networking
Streaming Video                   Aqua                      Multi-Channel
                    Runtime                 Skip Intro

Web 2.0                Productivity
                                         iPhone          Accessibility

Google                     Reflections                              Audio
             AJAX                                Thin Client
Security Sandbox       Multi-Touch    APIs                  Open Source
                                                  Apple
   Flex       Rich            Conversions           Microsoft     Adobe
       XAML        Web Services          Objective C       SUN
30% of software is successful (adopted)...




                                                   Failed (zero adoption)
                                                   Successful (adopted)



                                             70%

              30%
...if it even gets released




                              25%         Never Released
                                          Failed (zero adoption)
                                          Successful (adopted)


                22%




                                    53%
Setting up the right environment for software to be successful
Step 1: Become a UX evangelist...or hire one
What is UX?
Engaging (immersion)




                       Robbie Cooper, New York Times
Responsiveness (feedback)
External consistency
Performance
Helpful in accomplishing goals
Intuitiveness vs. efficiency
Familiarity vs. innovation
Appropriateness to context
Delivery of relevant, valuable content
Trustworthiness
Jared Spool’s Market Maturity




Novel/Proprietary      Feature Focus    UX Focus          Commoditization
No competition         Bullets on box   Too complex       Embedded
                                        Startup costs
                                        Unused features
UX can have a HUGE ROI
“Every $1 invested in usability
returns between $10 and $100”
             IBM “Cost-Justifying Ease of Use”
UX Fund
1. Demonstrated care in the design of their products and Web site
2. Has a history of innovation
3. Inspired loyalty in their customer base
4. Doing business with them was a positive experience



                                                     UX Fund: 39.3%  $19533.48
                                                     Nasdaq: 29.1%
                                                     S&P 500: 10.3%
                                                     Nasdaq 100: 28.7%
                                                     NYSE: 15.0%
Step 2: Get everyone on the same page
Product
CEO             Designer   Developer
      Manager
Product
CEO             Designer   Developer
      Manager
The workshop




               Force communication
The workshop




               Force communication
               Force collaboration
The workshop




               Force communication
               Force collaboration
               Expose assumptions
                Users
                Features
                Success
The workshop




               Force communication
               Force collaboration
               Expose assumptions
                Users
                Features
                Success
               Force Prioritization
The SUDA


           Cooper’s “User & Domain Analysis (UnDA)”

             Competitive analysis
             User research
             Literature review
             Personas
             Context scenarios
             Functional requirements
The SUDA


           EUI’s “System, User & Domain Audit (SUDA)”

             Competitive analysis
             User research
             Literature review
             Context scenarios
             Personas
             Functional requirements

            Adding
             Stakeholder interviews
             System & dev team audit
               Capacity review
               Environmental factors
               Technical factors
             Lo-fi “vision”
             Phased approach
The SUDA: Stakeholder interviews




                                   Build trust
                                   Skin in the game
                                   Passion & beliefs
                                   Quick wins
                                   Apprehensions
The SUDA: System & dev team audit




                                    Capacity review
                                    Environmental factors
                                    Technical factors
The SUDA: Lo-fi “vision”
The SUDA: Phased approach
Step 3: Plan, then forget your plans...
“I am the wisest man alive, for I know one thing,
and that is that I know nothing.”
                                          Socrates
“The great uncertainty of all data in war is a
peculiar difficulty, because all action must, to a
certain extent, be planned in a mere twilight,
which in addition not infrequently–like the
effect of a fog or moonshine–gives to things
exaggerated dimensions and unnatural
appearance.”
                             Carl von Clausewitz, On War
“No battle plan survives first contact with the
enemy.”
                                 Helmuth von Moltke
Much like individual soldiers in a battlefield, a
software system isn’t static. It is the behavior
created by the dynamic interaction of its parts.
Step 4: Create & communicate the vision
TriGeo Console Project Milestone v_0.1
                                                                    Last Modi ed: October 30, 2008 9:12 AM




EXPERIENCE MAP

The Experience Map acts as a diagram of the “ ow” of an
application. It is important to hone in on this high-level
framework of the application so a clear direction may be
established. This map helps the direction of wireframes without
getting too far into the details.

The content of the Experience Map is based on user research,
a current understanding of the application and methods of
improving usability. As more information is gathered and
Experience Map evolves until a direction has been established.

Creating the Experience Map was an ongoing process that ran
in tandem with wireframes and creating design compositions.
Although there was some inconsistent overlap due to these areas
being done in parallel, thinking around wireframes helped to
tighten areas of the Experience Map and vice versa.

In the end, a solid overview of the TriGeo Console was generated
that acts as the foundation for additional development and user
experience re nement. There is still work to be done and directly
correlates to the Wireframes.




                                                                                                             20
Other examples of vision demos




                        Apple’s Knowledge Navigator
                        Nokia Phones (check out Youtube)
                        Twitter in Plain English
Out of time...
title: Lead User Experience Architect
email: john.mcree@effectiveui.com
blog: www.johnmcree.com
twitter: @johnmcree


www.effectiveui.com

By the Book: Examining the Art of Building Great User Experiences in Software

  • 1.
    By the Book:Effective UI Examining the Art of Building Great User Experiences in Software - John McRee your user experience agency
  • 3.
    title: Lead UserExperience Architect email: john.mcree@effectiveui.com blog: www.johnmcree.com twitter: @johnmcree www.effectiveui.com
  • 4.
    Microsoft Apple Adobe Sun Strategic 20 iPhone Gold 15 Partner Java FX Agency Partner Preferred Developer Strategic Partner
  • 12.
    Flash Vector Graphics MXML Client Processing Cover-flow Java Service Oriented Architecture Silverlight Animation Social Networking Streaming Video Aqua Multi-Channel Runtime Skip Intro Web 2.0 Productivity iPhone Accessibility Google Reflections Audio AJAX Thin Client Security Sandbox Multi-Touch APIs Open Source Apple Flex Rich Conversions Microsoft Adobe XAML Web Services Objective C SUN
  • 13.
    30% of softwareis successful (adopted)... Failed (zero adoption) Successful (adopted) 70% 30%
  • 14.
    ...if it evengets released 25% Never Released Failed (zero adoption) Successful (adopted) 22% 53%
  • 15.
    Setting up theright environment for software to be successful
  • 16.
    Step 1: Becomea UX evangelist...or hire one
  • 17.
  • 18.
    Engaging (immersion) Robbie Cooper, New York Times
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
    Delivery of relevant,valuable content
  • 26.
  • 27.
    Jared Spool’s MarketMaturity Novel/Proprietary Feature Focus UX Focus Commoditization No competition Bullets on box Too complex Embedded Startup costs Unused features
  • 28.
    UX can havea HUGE ROI
  • 29.
    “Every $1 investedin usability returns between $10 and $100” IBM “Cost-Justifying Ease of Use”
  • 30.
    UX Fund 1. Demonstratedcare in the design of their products and Web site 2. Has a history of innovation 3. Inspired loyalty in their customer base 4. Doing business with them was a positive experience UX Fund: 39.3%  $19533.48 Nasdaq: 29.1% S&P 500: 10.3% Nasdaq 100: 28.7% NYSE: 15.0%
  • 35.
    Step 2: Geteveryone on the same page
  • 36.
    Product CEO Designer Developer Manager
  • 37.
    Product CEO Designer Developer Manager
  • 38.
    The workshop Force communication
  • 39.
    The workshop Force communication Force collaboration
  • 40.
    The workshop Force communication Force collaboration Expose assumptions Users Features Success
  • 41.
    The workshop Force communication Force collaboration Expose assumptions Users Features Success Force Prioritization
  • 42.
    The SUDA Cooper’s “User & Domain Analysis (UnDA)” Competitive analysis User research Literature review Personas Context scenarios Functional requirements
  • 44.
    The SUDA EUI’s “System, User & Domain Audit (SUDA)” Competitive analysis User research Literature review Context scenarios Personas Functional requirements Adding Stakeholder interviews System & dev team audit Capacity review Environmental factors Technical factors Lo-fi “vision” Phased approach
  • 45.
    The SUDA: Stakeholderinterviews Build trust Skin in the game Passion & beliefs Quick wins Apprehensions
  • 46.
    The SUDA: System& dev team audit Capacity review Environmental factors Technical factors
  • 47.
    The SUDA: Lo-fi“vision”
  • 48.
  • 49.
    Step 3: Plan,then forget your plans...
  • 50.
    “I am thewisest man alive, for I know one thing, and that is that I know nothing.” Socrates
  • 51.
    “The great uncertaintyof all data in war is a peculiar difficulty, because all action must, to a certain extent, be planned in a mere twilight, which in addition not infrequently–like the effect of a fog or moonshine–gives to things exaggerated dimensions and unnatural appearance.” Carl von Clausewitz, On War
  • 52.
    “No battle plansurvives first contact with the enemy.” Helmuth von Moltke
  • 53.
    Much like individualsoldiers in a battlefield, a software system isn’t static. It is the behavior created by the dynamic interaction of its parts.
  • 57.
    Step 4: Create& communicate the vision
  • 59.
    TriGeo Console ProjectMilestone v_0.1 Last Modi ed: October 30, 2008 9:12 AM EXPERIENCE MAP The Experience Map acts as a diagram of the “ ow” of an application. It is important to hone in on this high-level framework of the application so a clear direction may be established. This map helps the direction of wireframes without getting too far into the details. The content of the Experience Map is based on user research, a current understanding of the application and methods of improving usability. As more information is gathered and Experience Map evolves until a direction has been established. Creating the Experience Map was an ongoing process that ran in tandem with wireframes and creating design compositions. Although there was some inconsistent overlap due to these areas being done in parallel, thinking around wireframes helped to tighten areas of the Experience Map and vice versa. In the end, a solid overview of the TriGeo Console was generated that acts as the foundation for additional development and user experience re nement. There is still work to be done and directly correlates to the Wireframes. 20
  • 65.
    Other examples ofvision demos Apple’s Knowledge Navigator Nokia Phones (check out Youtube) Twitter in Plain English
  • 66.
  • 67.
    title: Lead UserExperience Architect email: john.mcree@effectiveui.com blog: www.johnmcree.com twitter: @johnmcree www.effectiveui.com