SlideShare a Scribd company logo
1 of 171
Download to read offline
BP 214



Yikes…It Looks Like That?! - UI Worst Practices
Chris Blatnick
Bruce Elgort




           ®
Your Hosts for Today's Session…
Your Hosts for Today's Session…



Chris Blatnick

Senior Technical Specialist - IBM
OpenNTF Project Contributor
UI Geek
Blog: www.interfacematters.com
                                    Yep...rounded corners! :-)
Your Hosts for Today's Session…
Your Hosts for Today's Session…



Bruce Elgort
OpenNTF Co-Founder
Taking Notes Podcast
Idea Jam
Show-N-Tell-Thursdays
Mad Drummer
Blog: www.bruceelgort.com
Contributing Editor: vowe.net
Yikes...It Looks Like That?! - UI Worst Practices
“Learn from the
mistakes of others”
Yikes...It Looks Like That?! - UI Worst Practices
“Those who do not learn
from history are doomed
      to repeat it”
Yikes...It Looks Like That?! - UI Worst Practices
“Whatchu talkin' 'bout Willis?”
These are important adages we hear often...
Yikes...It Looks Like That?! - UI Worst Practices
...but let's take a minute to reflect on them and
what they mean
Yikes...It Looks Like That?! - UI Worst Practices
Sometimes, the most powerful way to learn how
to do something right, is to examine how
someone did it WRONG
Yikes...It Looks Like That?! - UI Worst Practices
Thus, the thrust of our show...

User Interface Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
Subtitle:


Learn from the mistakes of others so you won't
be doomed to hear “Whatchu talkin' 'bout
Willis?” from your users!
Yikes...It Looks Like That?! - UI Worst Practices
A good user experience is not just nice to
have...it is a MUST HAVE

Just look at how the internet has changed our
perception as to how we look at Notes
applications and how we design them – well
maybe
Yikes...It Looks Like That?! - UI Worst Practices
Users are savvy, sophisticated and have little
patience for applications that waste their time
Yikes...It Looks Like That?! - UI Worst Practices
The aesthetic qualities of design are very much
a part of the modern application interface

Web 2.0 - they have to look nice and clean and
simple
Yikes...It Looks Like That?! - UI Worst Practices
Thus, it's your job as a developer to not only
write good code, but to create a...

Compelling User Experience
Yikes...It Looks Like That?! - UI Worst Practices
Here's how NOT to do it...
Validating User Input




       ®
Yikes...It Looks Like That?! - UI Worst Practices
We've all had to do this, whether it's
formatting the phone number in the
expected way, making sure they enter the
customer account correctly, or validating a
social security number.
How to tell your users you hate them and don't trust
them to enter some numbers...




Take a look and let that sink in. Think the users liked
this app?
How do we fix this?
 When data needs to be stored in a certain format, make sure you
  handle it from a programmatic standpoint.
 Don't put the effort on the user...that's why you get paid the big
  bucks!
Unclear Error Messages




       ®
Error messages need to actually say something.
They need a reason for being there
23
Yikes...It Looks Like That?! - UI Worst Practices
How do we fix this?
How do we fix this?
Clearly (in non-tech speak) state the error and direct the user
on what to do next.

Give enough detail so that support can actually help them
Another Great Example
Another Great Example




         Remember: Error messages should be

            informative and actionable
And One More Since They’re so Important
And One More Since They’re so Important




       No one said they have to be grey and boring!
Uncommon Use of UI Elements




      ®
Doh! Can you say Radio Buttons?




There was all kinds of code behind this control to prevent the
user selecting more than one choice! The question is “WHY?”
How do we fix this?
How do we fix this?

 Avoid going against established conventions.
 If users expect an element to work one way and it works another,
 you will quickly lose their trust.
Reusable/Generic Components




      ®
Yikes...It Looks Like That?! - UI Worst Practices
We all agree...code reuse is good.

Except when there's little thought
behind it...
Yikes...It Looks Like That?! - UI Worst Practices
What happens when we click 'Next'?
    Do we get “more than finished”?




Check out that text alignment too...What do you
think the problem is?
How do we fix this?
How do we fix this?

 When reusing any element, make sure that it fits the context of
 what the user is doing.
 Make the appropriate modifications to add functionality or
 remove unnecessary items to keep from confusing the user.
Poor Use of Color




       ®
Explosion at the Skittle’s Factory!
Explosion at the Skittle’s Factory!
There are just so many things wrong with this one…
There are just so many things wrong with this one…




          1. I got a sunburn from the color
          2. Too many choices for radio buttons
          3. Why did I need a dialog box for this?
Ah….Pink and Brown
Ah….Pink and Brown




  A great color combo (in fashion or home decor)...not in an
  application
How do we fix this?
How do we fix this?

Color choices in an application should generally be subtle. It's
absolutely necessary to utilize complementary colors from the
same palette.




If you're not sure what a color palette is...go learn it
right after this session
Looking at things from our point of “View”




        ®
Twist(ie) and shout…
Twist(ie) and shout…




         Don't let the Domino server design the
         UI for you!
How do we fix this?
How do we fix this?




           CSS it up a bit!
           Tables can be your friends too
Tabs Gone Wild!




      ®
Wow!
Wow!

 At least the designer was nice enough to use color
 to let us know where we are...
Tabs are Everywhere!
Tabs are Everywhere!




     They're even escaping outside the dialog box!!!
Notes is not exempt…
Notes is not exempt…




    If you see the “twidgie”, there's too many tabs!
Even Amazon got it wrong once…
Even Amazon got it wrong once…




Listen to Mr. Nielsen:

“Multiple rows create jumping UI elements, which destroy spatial memory
and thus make it impossible for users to remember which tabs they’ve
already visited. Also, of course, multiple rows are a sure symptom of
excessive complexity: If you need more tabs than will fit in a single row, you
need to simplify your design.”
Chris and Bruce Shake Their Heads…
Chris and Bruce Shake Their Heads…
How do we fix this?
How do we fix this?


 Tabs are an excellent way to divide content into logical
 sections, but like everything else, you can have too much
 of a good thing.




 Consider limiting tabs to a small set (6-8 is ideal)
If I Can't Do It...Don't Show It




       ®
For example...
For example...




 Edit button when I don't have rights
 Next/Previous links when I'm at the beginning or end of a list
How do we fix this?
How do we fix this?
 Either hide the function from the user completely or create a
  “disabled” state, where the function (button, link, etc.) is still
  physically in the same place but doesn't do anything.
 Based on the context, consider if you should give the user some
  clues about this (via an error message or text label).
The Screen and Paper Are Not The Same




      ®
Complex form designs don't print well
Complex form designs don't print well




           What looks great on your monitor...
May not translate to paper….
May not translate to paper….
How do we fix this?
How do we fix this?

Unless you have a simple design that maps nicely for printing,
create a separate “printer-friendly” version of pages and forms



                                            Remove unnecessary elements:

                                            •   Action bars
                                            •   Navigation
                                            •   Radio buttons and check boxes
                                            •   Any other UI element that is
                                                not meant for print
                                                consumption
The Shifty Eyed Avatar
The Shifty Eyed Avatar

  How YOU doin'?




                         'nuff said...
The Shifty Eyed Avatar
Composite Applications/Mashups




      ®
There are just no words for this one…
There are just no words for this one…
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
How do we fix this?
How do we fix this?
 Take great care when integrating disparate programs in a composite
  application. If the UIs are not complementary, you risk disorienting
  the user and making their work harder than using the apps
  separately.
 Creating a good UI in a composite app environment will be a
  challenge and we're just really starting to explore this area. Keep an
  eye on the Notes community blogs to see what people are doing.
The Notes Skeleton




      ®
How many Notes apps look like this…
How many Notes apps look like this…




     When we see such applications, are we really
     surprised when people say they don't like Lotus Notes?
How do we fix this?
How do we fix this?
 User facing apps should be polished...No Exceptions!
 Don't expose the plumbing to the users...they expect more.
Importing Data




      ®
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
How do we fix this?
How do we fix this?




          You're the developer...eliminate the barriers by
          writing the code to perform these steps.
It Doesn't All Have To Look Like Mail




       ®
From this…
From this…
To this…
To this…
To this…
To this…
From this…
From this…
To this…
To this…
How do we fix this?
How do we fix this?
 Get out of the mindset that all Lotus Notes applications should look
  the same and utilize a 2 or 3-pane UI
 The application user interface should be designed to facilitate the
  work that the user does.
 Start your design by focusing on the interface first and let the UI be
  driven by user needs
“Magic” Functionality




       ®
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
What Happened Next
What Happened Next

 I called customer service (expensive for me in terms of
  time...expensive for them in terms of support costs)
 Told that the field expected 7 characters (put a zero in front)!
 Told to replace the first alpha character with a zero!
How do we fix this?
How do we fix this?
 Avoid the need to use voodoo rituals in the first place by coding
  your application appropriately.
 If you can't avoid the situation, provide clear, detailed, simple
  instructions on what is required
 Your user's time is their most precious asset. Don't abuse it!
Admin Driven Application Choices




       ®
How do we fix this?
How do we fix this?

 Get rid of the Admins!?




Administrators DO NOT have the final say in application functionality!

Repeat this mantra: BUSINESS drives APPS, APPS drive Infrastructure

If you are doing it any other way, it's time to make a change...
How do we fix this?

 Get rid of the Admins!?




Administrators DO NOT have the final say in application functionality!

Repeat this mantra: BUSINESS drives APPS, APPS drive Infrastructure

If you are doing it any other way, it's time to make a change...
Layout and backgrounds




       ®
A very common mistake...
A very common mistake...
Wasting precious screen real estate with graphics
that don't add to the functionality of the application




            And watch out for those background too!
How do we fix this?
How do we fix this?
 Make sure features have a definite purpose for being on the screen.
 A little decoration is often a good thing to add but not when it
 hinders usability.
 Also be aware of readability. Your app should be easy on the
 eyes, especially for older users.
 Tip: Learn about the proper use of whitespace
Make a good first impression




       ®
Yikes...It Looks Like That?! - UI Worst Practices
Please don't let this be your introduction to the world
How do we fix this?
How do we fix this?
If you use an About document and want it to appear when users are new,
invest the time to make it as attractive and useful as the rest of your application.
Don't be afraid to spice it up...
Don't be afraid to spice it up...
Don't assume...
We won’t even say it




           ®
Don't assume that functionality is clear to your users
unless it's “knock you over the head obvious”
Don't assume that functionality is clear to your users
unless it's “knock you over the head obvious”
How do we fix this?
How do we fix this?
 If you use features that do not offer any affordances (obvious clues
  that let you know what something does), you need to provide users
  with clear and direct instructions.
 If possible, don't include ambiguous functionality at all. Make
  features simple and easy to use.
 Here's a good litmus test...
“Is this easy enough that my grandma could do it?”
Let's wrap things up...




        ®
What Can You Take Away?
What Can You Take Away?

 All of the things we talked about today were UI constructs that
 violated some established practices around the user experience.
 These practices are the fundamental principles of UI design
Keep the fundamentals in mind
Keep the fundamentals in mind
In their book “Software for Use”, Larry Constantine and Lucy Lockwood introduce the
six fundamental principles of UI design:


1. The structure principle
2. The simplicity principle
3. The visibility principle
4. The feedback principle
5. The tolerance principle
6. The reuse principle
The Structure Principle

 The user interface design and layout should have a logical
  structure
 Organize related information and keep unrelated
  information separated
 This principle deals with the overall architecture...
   Is it clear, concise and cohesive?
The Simplicity Principle

 The UI should be simple and easy to use. Your users
  should be able to figure out common tasks without
  help
 Focus on simple language...avoid tech talk
 Long procedures should be broken into shorter tasks
  and have good shortcuts




                      Simplicity
The Visibility Principle
 Keep your UI uncluttered and show the user what
  they need when they need it...no more!
 Don't overwhelm the user with unneeded features or
  too many choices
The Feedback Principle

 Let your users know what is going on...keep them
  informed of changes in state, relevant errors, etc.
The Tolerance Principle
 Your application should be forgiving of user errors and flexible
  enough to mitigate problems (allowing undo, rollback, etc.).
 Your application should prevent errors as much as possible in the
  first place by being tolerant of user input




      This is the polar opposite of tolerance!
The Reuse Principle
 Your application should reuse components and behaviors when
  possible and be consistent with user expectations, reducing the
  need for users to relearn or remember.
Questions and Answers




      ®

More Related Content

What's hot

The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityDan Saffer
 
Game Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI LayoutGame Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI LayoutDavid Farrell
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesDavid Farrell
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft WordAbdullah Shiam
 
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...City University London
 

What's hot (8)

Designing bots
Designing botsDesigning bots
Designing bots
 
The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) Discoverability
 
Game Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI LayoutGame Design 2: Lecture 10 - UI Layout
Game Design 2: Lecture 10 - UI Layout
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft Word
 
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
 
Ppp2
Ppp2Ppp2
Ppp2
 
Presentation Ux
Presentation UxPresentation Ux
Presentation Ux
 

Viewers also liked

Cloud asia 2011 tidbits
Cloud asia 2011 tidbitsCloud asia 2011 tidbits
Cloud asia 2011 tidbitsAlan Quayle
 
20101022 cfi social media watch-no.24
20101022 cfi social media watch-no.2420101022 cfi social media watch-no.24
20101022 cfi social media watch-no.24sonia ai
 
Brewing Beer with Windows Azure UKWAUG
Brewing Beerwith Windows Azure UKWAUGBrewing Beerwith Windows Azure UKWAUG
Brewing Beer with Windows Azure UKWAUGMaarten Balliauw
 
Venice Sessions IV - Nicola Greco - Internet is a revolution
Venice Sessions IV - Nicola Greco - Internet is a revolutionVenice Sessions IV - Nicola Greco - Internet is a revolution
Venice Sessions IV - Nicola Greco - Internet is a revolutionvenice sessions
 
Architectural Patterns for the Cloud
Architectural Patterns for the CloudArchitectural Patterns for the Cloud
Architectural Patterns for the CloudMaarten Balliauw
 

Viewers also liked (6)

Cloud asia 2011 tidbits
Cloud asia 2011 tidbitsCloud asia 2011 tidbits
Cloud asia 2011 tidbits
 
20101022 cfi social media watch-no.24
20101022 cfi social media watch-no.2420101022 cfi social media watch-no.24
20101022 cfi social media watch-no.24
 
Brewing Beer with Windows Azure UKWAUG
Brewing Beerwith Windows Azure UKWAUGBrewing Beerwith Windows Azure UKWAUG
Brewing Beer with Windows Azure UKWAUG
 
Ogilvy
OgilvyOgilvy
Ogilvy
 
Venice Sessions IV - Nicola Greco - Internet is a revolution
Venice Sessions IV - Nicola Greco - Internet is a revolutionVenice Sessions IV - Nicola Greco - Internet is a revolution
Venice Sessions IV - Nicola Greco - Internet is a revolution
 
Architectural Patterns for the Cloud
Architectural Patterns for the CloudArchitectural Patterns for the Cloud
Architectural Patterns for the Cloud
 

Similar to Yikes...It Looks Like That?! - UI Worst Practices

Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interfaceThomas Byttebier
 
Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Danielle Arvanitis
 
When Interface Design Attacks
When Interface Design AttacksWhen Interface Design Attacks
When Interface Design Attacksoscon2007
 
When Interface Design Attacks
When Interface Design AttacksWhen Interface Design Attacks
When Interface Design AttacksRoss Lawley
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
 
Onrec Talk V9
Onrec Talk V9Onrec Talk V9
Onrec Talk V9SiConroy
 
Jason Moore - Interaction design in enterprise teams
Jason Moore - Interaction design in enterprise teamsJason Moore - Interaction design in enterprise teams
Jason Moore - Interaction design in enterprise teamsroblund
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestringteaguese
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
The Top 10 things that UX people get obsessed about
The Top 10 things that UX people get obsessed aboutThe Top 10 things that UX people get obsessed about
The Top 10 things that UX people get obsessed aboutAndy Marshall
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Everett McKay
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic AdvantageMichael Dubakov
 
Description Of A User Interface
Description Of A User InterfaceDescription Of A User Interface
Description Of A User InterfaceJessica Tanner
 

Similar to Yikes...It Looks Like That?! - UI Worst Practices (20)

Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interface
 
From Zero to Hero
From Zero to HeroFrom Zero to Hero
From Zero to Hero
 
Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)
 
When Interface Design Attacks
When Interface Design AttacksWhen Interface Design Attacks
When Interface Design Attacks
 
When Interface Design Attacks
When Interface Design AttacksWhen Interface Design Attacks
When Interface Design Attacks
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app development
 
Onrec Talk V9
Onrec Talk V9Onrec Talk V9
Onrec Talk V9
 
Jason Moore - Interaction design in enterprise teams
Jason Moore - Interaction design in enterprise teamsJason Moore - Interaction design in enterprise teams
Jason Moore - Interaction design in enterprise teams
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
UX Design for ChatBots
UX Design for ChatBotsUX Design for ChatBots
UX Design for ChatBots
 
The Top 10 things that UX people get obsessed about
The Top 10 things that UX people get obsessed aboutThe Top 10 things that UX people get obsessed about
The Top 10 things that UX people get obsessed about
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
 
Ui design
Ui designUi design
Ui design
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
Description Of A User Interface
Description Of A User InterfaceDescription Of A User Interface
Description Of A User Interface
 

More from Bruce Elgort

Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...
Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...
Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...Bruce Elgort
 
SpeedGeeking! Mobile Application development with IBM XPages
SpeedGeeking! Mobile Application development with IBM XPagesSpeedGeeking! Mobile Application development with IBM XPages
SpeedGeeking! Mobile Application development with IBM XPagesBruce Elgort
 
XPages Guru Webinar - XPages sample apps
XPages Guru Webinar - XPages sample appsXPages Guru Webinar - XPages sample apps
XPages Guru Webinar - XPages sample appsBruce Elgort
 
Social Business Strategies - Get Social. Do Business.
Social Business Strategies - Get Social. Do Business.Social Business Strategies - Get Social. Do Business.
Social Business Strategies - Get Social. Do Business.Bruce Elgort
 
JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...
JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...
JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...Bruce Elgort
 
BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...
BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...
BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...Bruce Elgort
 
How OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
How OpenNTF Open Source Solutions Can Save You Time, Money And Your HairHow OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
How OpenNTF Open Source Solutions Can Save You Time, Money And Your HairBruce Elgort
 
Developing a World Class Web 2.0 Application with XPages
Developing a World Class Web 2.0 Application with XPagesDeveloping a World Class Web 2.0 Application with XPages
Developing a World Class Web 2.0 Application with XPagesBruce Elgort
 
Lotus Technical Information and Education Community - Podcasting and Lotus I...
Lotus Technical Information and Education Community  - Podcasting and Lotus I...Lotus Technical Information and Education Community  - Podcasting and Lotus I...
Lotus Technical Information and Education Community - Podcasting and Lotus I...Bruce Elgort
 
OpenNTF - The Lotus Notes and Domino Open Source Organization
OpenNTF - The Lotus Notes and Domino Open Source OrganizationOpenNTF - The Lotus Notes and Domino Open Source Organization
OpenNTF - The Lotus Notes and Domino Open Source OrganizationBruce Elgort
 
iPhone OS 3.0 Highlights
iPhone OS 3.0 HighlightsiPhone OS 3.0 Highlights
iPhone OS 3.0 HighlightsBruce Elgort
 

More from Bruce Elgort (11)

Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...
Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...
Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF -...
 
SpeedGeeking! Mobile Application development with IBM XPages
SpeedGeeking! Mobile Application development with IBM XPagesSpeedGeeking! Mobile Application development with IBM XPages
SpeedGeeking! Mobile Application development with IBM XPages
 
XPages Guru Webinar - XPages sample apps
XPages Guru Webinar - XPages sample appsXPages Guru Webinar - XPages sample apps
XPages Guru Webinar - XPages sample apps
 
Social Business Strategies - Get Social. Do Business.
Social Business Strategies - Get Social. Do Business.Social Business Strategies - Get Social. Do Business.
Social Business Strategies - Get Social. Do Business.
 
JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...
JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...
JMP206 - How I Went Beyond the Hype, Narcissism and Trendiness to Become a So...
 
BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...
BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...
BP207 - Apps, apps, apps and more apps: Meet the very best open source apps f...
 
How OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
How OpenNTF Open Source Solutions Can Save You Time, Money And Your HairHow OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
How OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
 
Developing a World Class Web 2.0 Application with XPages
Developing a World Class Web 2.0 Application with XPagesDeveloping a World Class Web 2.0 Application with XPages
Developing a World Class Web 2.0 Application with XPages
 
Lotus Technical Information and Education Community - Podcasting and Lotus I...
Lotus Technical Information and Education Community  - Podcasting and Lotus I...Lotus Technical Information and Education Community  - Podcasting and Lotus I...
Lotus Technical Information and Education Community - Podcasting and Lotus I...
 
OpenNTF - The Lotus Notes and Domino Open Source Organization
OpenNTF - The Lotus Notes and Domino Open Source OrganizationOpenNTF - The Lotus Notes and Domino Open Source Organization
OpenNTF - The Lotus Notes and Domino Open Source Organization
 
iPhone OS 3.0 Highlights
iPhone OS 3.0 HighlightsiPhone OS 3.0 Highlights
iPhone OS 3.0 Highlights
 

Recently uploaded

Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 

Recently uploaded (20)

Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 

Yikes...It Looks Like That?! - UI Worst Practices

  • 1. BP 214 Yikes…It Looks Like That?! - UI Worst Practices Chris Blatnick Bruce Elgort ®
  • 2. Your Hosts for Today's Session…
  • 3. Your Hosts for Today's Session… Chris Blatnick Senior Technical Specialist - IBM OpenNTF Project Contributor UI Geek Blog: www.interfacematters.com Yep...rounded corners! :-)
  • 4. Your Hosts for Today's Session…
  • 5. Your Hosts for Today's Session… Bruce Elgort OpenNTF Co-Founder Taking Notes Podcast Idea Jam Show-N-Tell-Thursdays Mad Drummer Blog: www.bruceelgort.com Contributing Editor: vowe.net
  • 9. “Those who do not learn from history are doomed to repeat it”
  • 12. These are important adages we hear often...
  • 14. ...but let's take a minute to reflect on them and what they mean
  • 16. Sometimes, the most powerful way to learn how to do something right, is to examine how someone did it WRONG
  • 18. Thus, the thrust of our show... User Interface Worst Practices
  • 20. Subtitle: Learn from the mistakes of others so you won't be doomed to hear “Whatchu talkin' 'bout Willis?” from your users!
  • 22. A good user experience is not just nice to have...it is a MUST HAVE Just look at how the internet has changed our perception as to how we look at Notes applications and how we design them – well maybe
  • 24. Users are savvy, sophisticated and have little patience for applications that waste their time
  • 26. The aesthetic qualities of design are very much a part of the modern application interface Web 2.0 - they have to look nice and clean and simple
  • 28. Thus, it's your job as a developer to not only write good code, but to create a... Compelling User Experience
  • 30. Here's how NOT to do it...
  • 33. We've all had to do this, whether it's formatting the phone number in the expected way, making sure they enter the customer account correctly, or validating a social security number.
  • 34. How to tell your users you hate them and don't trust them to enter some numbers... Take a look and let that sink in. Think the users liked this app?
  • 35. How do we fix this?  When data needs to be stored in a certain format, make sure you handle it from a programmatic standpoint.  Don't put the effort on the user...that's why you get paid the big bucks!
  • 37. Error messages need to actually say something. They need a reason for being there
  • 38. 23
  • 40. How do we fix this?
  • 41. How do we fix this? Clearly (in non-tech speak) state the error and direct the user on what to do next. Give enough detail so that support can actually help them
  • 43. Another Great Example Remember: Error messages should be informative and actionable
  • 44. And One More Since They’re so Important
  • 45. And One More Since They’re so Important No one said they have to be grey and boring!
  • 46. Uncommon Use of UI Elements ®
  • 47. Doh! Can you say Radio Buttons? There was all kinds of code behind this control to prevent the user selecting more than one choice! The question is “WHY?”
  • 48. How do we fix this?
  • 49. How do we fix this?  Avoid going against established conventions.  If users expect an element to work one way and it works another, you will quickly lose their trust.
  • 52. We all agree...code reuse is good. Except when there's little thought behind it...
  • 54. What happens when we click 'Next'? Do we get “more than finished”? Check out that text alignment too...What do you think the problem is?
  • 55. How do we fix this?
  • 56. How do we fix this?  When reusing any element, make sure that it fits the context of what the user is doing.  Make the appropriate modifications to add functionality or  remove unnecessary items to keep from confusing the user.
  • 57. Poor Use of Color ®
  • 58. Explosion at the Skittle’s Factory!
  • 59. Explosion at the Skittle’s Factory!
  • 60. There are just so many things wrong with this one…
  • 61. There are just so many things wrong with this one… 1. I got a sunburn from the color 2. Too many choices for radio buttons 3. Why did I need a dialog box for this?
  • 63. Ah….Pink and Brown A great color combo (in fashion or home decor)...not in an application
  • 64. How do we fix this?
  • 65. How do we fix this? Color choices in an application should generally be subtle. It's absolutely necessary to utilize complementary colors from the same palette. If you're not sure what a color palette is...go learn it right after this session
  • 66. Looking at things from our point of “View” ®
  • 68. Twist(ie) and shout… Don't let the Domino server design the UI for you!
  • 69. How do we fix this?
  • 70. How do we fix this? CSS it up a bit! Tables can be your friends too
  • 72. Wow!
  • 73. Wow! At least the designer was nice enough to use color to let us know where we are...
  • 75. Tabs are Everywhere! They're even escaping outside the dialog box!!!
  • 76. Notes is not exempt…
  • 77. Notes is not exempt… If you see the “twidgie”, there's too many tabs!
  • 78. Even Amazon got it wrong once…
  • 79. Even Amazon got it wrong once… Listen to Mr. Nielsen: “Multiple rows create jumping UI elements, which destroy spatial memory and thus make it impossible for users to remember which tabs they’ve already visited. Also, of course, multiple rows are a sure symptom of excessive complexity: If you need more tabs than will fit in a single row, you need to simplify your design.”
  • 80. Chris and Bruce Shake Their Heads…
  • 81. Chris and Bruce Shake Their Heads…
  • 82. How do we fix this?
  • 83. How do we fix this? Tabs are an excellent way to divide content into logical sections, but like everything else, you can have too much of a good thing. Consider limiting tabs to a small set (6-8 is ideal)
  • 84. If I Can't Do It...Don't Show It ®
  • 86. For example...  Edit button when I don't have rights  Next/Previous links when I'm at the beginning or end of a list
  • 87. How do we fix this?
  • 88. How do we fix this?  Either hide the function from the user completely or create a “disabled” state, where the function (button, link, etc.) is still physically in the same place but doesn't do anything.  Based on the context, consider if you should give the user some clues about this (via an error message or text label).
  • 89. The Screen and Paper Are Not The Same ®
  • 90. Complex form designs don't print well
  • 91. Complex form designs don't print well What looks great on your monitor...
  • 92. May not translate to paper….
  • 93. May not translate to paper….
  • 94. How do we fix this?
  • 95. How do we fix this? Unless you have a simple design that maps nicely for printing, create a separate “printer-friendly” version of pages and forms Remove unnecessary elements: • Action bars • Navigation • Radio buttons and check boxes • Any other UI element that is not meant for print consumption
  • 96. The Shifty Eyed Avatar
  • 97. The Shifty Eyed Avatar How YOU doin'? 'nuff said...
  • 98. The Shifty Eyed Avatar
  • 100. There are just no words for this one…
  • 101. There are just no words for this one…
  • 104. How do we fix this?
  • 105. How do we fix this?  Take great care when integrating disparate programs in a composite application. If the UIs are not complementary, you risk disorienting the user and making their work harder than using the apps separately.  Creating a good UI in a composite app environment will be a challenge and we're just really starting to explore this area. Keep an eye on the Notes community blogs to see what people are doing.
  • 107. How many Notes apps look like this…
  • 108. How many Notes apps look like this… When we see such applications, are we really surprised when people say they don't like Lotus Notes?
  • 109. How do we fix this?
  • 110. How do we fix this?  User facing apps should be polished...No Exceptions!  Don't expose the plumbing to the users...they expect more.
  • 116. How do we fix this?
  • 117. How do we fix this? You're the developer...eliminate the barriers by writing the code to perform these steps.
  • 118. It Doesn't All Have To Look Like Mail ®
  • 129. How do we fix this?
  • 130. How do we fix this?  Get out of the mindset that all Lotus Notes applications should look the same and utilize a 2 or 3-pane UI  The application user interface should be designed to facilitate the work that the user does.  Start your design by focusing on the interface first and let the UI be driven by user needs
  • 136. What Happened Next  I called customer service (expensive for me in terms of time...expensive for them in terms of support costs)  Told that the field expected 7 characters (put a zero in front)!  Told to replace the first alpha character with a zero!
  • 137. How do we fix this?
  • 138. How do we fix this?  Avoid the need to use voodoo rituals in the first place by coding your application appropriately.  If you can't avoid the situation, provide clear, detailed, simple instructions on what is required  Your user's time is their most precious asset. Don't abuse it!
  • 140. How do we fix this?
  • 141. How do we fix this? Get rid of the Admins!? Administrators DO NOT have the final say in application functionality! Repeat this mantra: BUSINESS drives APPS, APPS drive Infrastructure If you are doing it any other way, it's time to make a change...
  • 142. How do we fix this? Get rid of the Admins!? Administrators DO NOT have the final say in application functionality! Repeat this mantra: BUSINESS drives APPS, APPS drive Infrastructure If you are doing it any other way, it's time to make a change...
  • 144. A very common mistake...
  • 145. A very common mistake... Wasting precious screen real estate with graphics that don't add to the functionality of the application And watch out for those background too!
  • 146. How do we fix this?
  • 147. How do we fix this?  Make sure features have a definite purpose for being on the screen.  A little decoration is often a good thing to add but not when it hinders usability.  Also be aware of readability. Your app should be easy on the eyes, especially for older users.  Tip: Learn about the proper use of whitespace
  • 148. Make a good first impression ®
  • 150. Please don't let this be your introduction to the world
  • 151. How do we fix this?
  • 152. How do we fix this? If you use an About document and want it to appear when users are new, invest the time to make it as attractive and useful as the rest of your application.
  • 153. Don't be afraid to spice it up...
  • 154. Don't be afraid to spice it up...
  • 155. Don't assume... We won’t even say it ®
  • 156. Don't assume that functionality is clear to your users unless it's “knock you over the head obvious”
  • 157. Don't assume that functionality is clear to your users unless it's “knock you over the head obvious”
  • 158. How do we fix this?
  • 159. How do we fix this?  If you use features that do not offer any affordances (obvious clues that let you know what something does), you need to provide users with clear and direct instructions.  If possible, don't include ambiguous functionality at all. Make features simple and easy to use.  Here's a good litmus test... “Is this easy enough that my grandma could do it?”
  • 160. Let's wrap things up... ®
  • 161. What Can You Take Away?
  • 162. What Can You Take Away?  All of the things we talked about today were UI constructs that violated some established practices around the user experience.  These practices are the fundamental principles of UI design
  • 164. Keep the fundamentals in mind In their book “Software for Use”, Larry Constantine and Lucy Lockwood introduce the six fundamental principles of UI design: 1. The structure principle 2. The simplicity principle 3. The visibility principle 4. The feedback principle 5. The tolerance principle 6. The reuse principle
  • 165. The Structure Principle  The user interface design and layout should have a logical structure  Organize related information and keep unrelated information separated  This principle deals with the overall architecture... Is it clear, concise and cohesive?
  • 166. The Simplicity Principle  The UI should be simple and easy to use. Your users should be able to figure out common tasks without help  Focus on simple language...avoid tech talk  Long procedures should be broken into shorter tasks and have good shortcuts Simplicity
  • 167. The Visibility Principle  Keep your UI uncluttered and show the user what they need when they need it...no more!  Don't overwhelm the user with unneeded features or too many choices
  • 168. The Feedback Principle  Let your users know what is going on...keep them informed of changes in state, relevant errors, etc.
  • 169. The Tolerance Principle  Your application should be forgiving of user errors and flexible enough to mitigate problems (allowing undo, rollback, etc.).  Your application should prevent errors as much as possible in the first place by being tolerant of user input This is the polar opposite of tolerance!
  • 170. The Reuse Principle  Your application should reuse components and behaviors when possible and be consistent with user expectations, reducing the need for users to relearn or remember.