approaches to enhancing the user experience

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)

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/)

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)

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

Twitter

Facebook

Google

Example: foursquare.com


Highlighted text to indicate location

Minimal amount of text on each page

Immediate indication of results

Sample XPages site: http://www.bloggeropen.com


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/


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:

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:

Script Sample 3b:

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



approaches to enhancing the user experience

Technology