approaches to enhancing the user experience
TRANSCRIPT
Approaches to Enhancing the
User Experience
Mike McGarelCollaborative Solutions DeveloperCzarnowski
Agenda
Introduction
Users, Inspiration and Design Philosophy
Common UI and UX Design Practices
Script Samples
@Sum
Mike McGarel
Notes/Web developer for over 12 years
Work for a customer, not a business partner
Responsible for intranet and extranet applications
Started as a user then moved into IT
Former software trainer
Developer for the Blogger Open and SkiLUG sites
Currently VP of GRANITE, the Chicago-based Lotus user group
I AM
Now it's time to talk about . . .
U
Users
Why a user-focused approach?
The Circle of Life, IT-style
Happy Developer
Happy IT Manager
Happy Users
Speaking of users . . .
Your users are not the same as someone else's users
Consider your audience
Consider your audience segments
You are not a user
Your boss is not a user
What do users want?
Ask them via testing
In the beginning, paper prototyping is best
Continuous process
Make changes or follow up with feedback
Testing Tips
Don't be attached
Find the obvious
No such thing as an average user
Find the majority opinion
Don't Make Me Think
Title of excellent book by Steve Krug, usability expert
We want to do, not think about how to do it
People like choices but not too many
Meet user expectations
UI / UX Considerations
Page should have visual hierarchy
Page should be visually appealing
Readable, high contrast text
Graphics if possible
Break up complex tasks if possible
Take advantage of existing behavior,
e.g. Google-type searches
Users don't care what the app can do,
they care what they can do
Corporate apps != Web apps
Design limitations
Audience not there by choice and can't leave
No selling (or is there?)
Know the competition
Can you add a WOW factor?
Some things to think about
A good user experience is more art than science
No absolutes
So many user options:
Devices
Operating systems
Clients
Locations
XPages design takes more planning traditional
Notes/Domino development
That 1% Inspiration
Quick Design Inspiration:
Design Sites
Regularly post links to themes and templates
Also icon sets and other resources
Some free, some not
Sample theme/template compilations:
Color
Nature
Texture
Type, e.g, ecommerce or blog
A few sites often posting links to templates/themes
Smashing Magazine (smashingmagazine.com)
Web Design Ledger (webdesignledger.com)
1st Web Designer (1stwebdesigner.com)
Web Designer Depot (webdesignerdepot.com)
Design Informer (http://www.designinformer.com)
Noupe (noupe.com)
SloDive (slodive.com)
Naldz Graphics (naldzgraphics.net)
Quick Design Inspiration:
Color Pickers and Color Schemes
Search color picker = over 3 million results
Search color scheme = over 18 million results
Adobe has a great site for schemes:
http://kuler.adobe.com
More resources:
Color Scheme Generator
(http://www.perban.dk/color+scheme)
Color Scheme Designer
(http://colorschemedesigner.com)
Color Palette Generator
(http://www.degraeve.com/color-palette/)
Quick Design Inspiration:
Design Patterns
Reusable solution to a commonly occurring problem
Examples:
Yahoo Design Pattern Library
(developer.yahoo.com/patterns/)
Article: Ultimate Guide toTable UI Patterns
(www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx)
Quick Design Inspiration:
Corporate Template
Eases design decisions
Users like consistency
If you don't have a template, now's a good time to put one together
OneUI is a good start
How some developers view users
Instead, say Be Our Guest
Image Copyright Walt Disney Company
Treat users of your application as you would guests in your home
How do you treat guests at a party?
Greet them at the door
Explain where things are
Put the food and drinks out where they can find them
Be accommodating
Thank them for visiting
Treating people similarly within an application involves:
Home page that answers the questions:
Where am I?
What do you want me to do?
How can I find the information I need?
Keep the user comfortable
Show only what's necessary
Make it easy to know what to do next
Use the words the users use
Using the Be Our Guest Approach
Consider the users at the beginning
Make it easy to get information when necessary
e.g. Type-aheads
e.g. Popup tips
Keep the user comfortable
Use common practices
Keep the choices to a minimum
Get feedback
Make changes based on feedback
Some Common UI and UX Practices
AT-ATLUG
Some Common UI and UX Practices - 1
Login link, usually on upper right
Search bar near the top
Big buttons for actions
Used by:
Delicious
Dropbox
Tripit
Lotus Greenhouse
(and many more . . . )
Foursquare
Gowalla
Example: foursquare.com
Some Common UI and UX Practices - 2
Highlighted text to indicate location
Minimal amount of text on each page
Immediate indication of results
Sample XPages site: http://www.bloggeropen.com
Some Common UI and UX Practices - 3
Highlighted menu item to indicate location
Advanced search page
Pagers
Link tooltip
Inline editing
Sample XPages site utilizing OneUI:
Notes/Domino XPages Development Forum at
http://www-10.lotus.com/ldd/xpagesforum.nsf/
Some Common UI and UX Practices - 4
Highlights when hovering over menu items
Sectioned menu
Larger tooltip
Location:
Code bin of OpenNTF.org (bottom of Projects page)
XPages based database called DojoExamples.nsf
Direct link: http://www.openntf.org/Projects/codebin
/codebin.nsf/CodeByDate/43062D24B4C6B1CA862577D2005B6D61
Easy for the user doesn't have to be difficult for the developer.
Script Sample 1:
Hiding Unneeded Areas of a Form
Site: SkiLUG (http://www.skilug.org)
Registration form has separate areas for:
Sponsorship
Skiing
Snowboarding
Some areas are Section design elements within XPages
Specific questions and answers are displayed/hidden using Dojo, the JavaScript framework included within XPages
Script Sample 1a:
Display based on user selection
Before
After
Script Sample 1b:
Source code for page
(rest of table code here)
Script Sample 1c:
Code for hiding the
Single line of JavaScript code called in the onClick event
for the radio button group:
toggleDivDisplay("#{id:divSkiLessons}",this.value);
A few lines of code in a client side JavaScript:
function toggleDivDisplay(targetID,val) {
var displayVal = (val=="Yes") ? "block" : "none";
dojo.style(dojo.byId(targetID),"display",displayVal);
}
Script Sample 2:
An animated navigation menu
Location: Back to the database called
DojoExamples.nsf
Script Sample 2a:
Source code from page
Script Sample 2b:
Source code from page
Script Sample 3:
A dynamic number of edit boxes
From my secret lair under a volcano
You've heard of IBM Watson, the supercomputer that defeated two former Jeopardy champions at their own game?
I present . . .
Script Sample 3a:
Source code from page
Script Sample 3b:
Source code from page
Script Sample 3c:
Source code from script library
function calculateSum(numArray) {
var sum = 0;
var n = 0;
for (var i = 0; i < numArray.length; i++) {
n = (numArray[i] == "") ? 0 : numArray[i] ;
sum = sum + n;
}
return sum;
}
Script Sample 3d:
Source code from button
var uNum = sessionScope.get("scpBoxes");
sessionScope.put("scpSum", calcSum(uNum));
context.redirectToPage("Sum.xsp");
In closing . . .
Let's change the perception of Notes'
UX
From
SUX
To
ROX
Thank you. Thank you very much.
Blog: www.bleedyellow.com/blogs/McGarelGramming/
Twitter: @mmcgarel
Email: [email protected]
LinkedIn: www.linkedin.com/in/mikemcgarel
ATLUG March 31, 2011
ATLUG March 31, 2011
ATLUG March 31, 2010