WEB APPLICATIONSwith personality

Tulsi Dharmarajan

Make sure to enter your audio pin so we will know who is speaking.

First, some housekeeping

Webinar controls

Mute or un-mute your microphone by clicking on this icon.

About me

Sr. Product Manager at Allegiance, a leading provider of VOC & EFM

Contact information: http://www.linkedin.com/in/tulsid http://twitter.com/tulsid http://www.delicious.com/tulsid/ux

AGENDA

1. TRENDS & PRODUCT PERSONALITY2. DESIGN THINKING3. WIREFRAMES & REQUIREMENTS4. CREATING DESIGN ADVOCATES

1. TRENDS & PRODUCT PERSONALITY2. DESIGN THINKING3. WIREFRAMES & REQUIREMENTS4. CREATING DESIGN ADVOCATES

Tone of the product

Do you know the personality of your product? Friendly Casual Cool Formal

Identify the tone that will portray the personality

Leadership brands have embraced a consistent tone

Embrace minimalism!

Tumblr (above) TeuxDeux (below)

Blank slates

Wufoo (top) maintains the personality – with the tone, color, and font. LightCMS (right) provides useful information on getting started and where to find more help.

Progressive disclosure

Good defaults

CampaignMonitor

In contextNetflix – core information in context

Error messages

Avoid sending the user mixed signals

Error messages, continued

Examples of meaningful error messages from LastFMNing.

Simple oversights

Examples of things to notice: Capitalization Spelling & grammatical mistakes Inconsistency Date & numeric formats

Visual design also set tone & personality

What is design thinking?

Human centered approach to innovation

How to think like a designer Be curious, ask questions Empathize – with the customer Think analytically Be ever optimistic! Be always ready for change Willing to collaborate

Resource: Tim Brown

Design thinking

Design & brand image

Design for…the self selecting environmentcreating brand evangelists Innovation and communicationdifferentiation and the promise of changean emotional connection with your user

Who is your user?

Create a user persona Who is the software for? What motivates your user? What will make them successful at their job?

http://boagworld.com/usability/ http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf

Flow based: before

Flow based: after

Less is more: task based

eGain Service

Don’t reinvent the wheel

Resources:http://developer.yahoo.com/ypatterns/http://patterns.endeca.comhttp://www.welie.com/http://ui-patterns.com/http://patternry.com/

Creating wireframes

Focus Ignore Flow Web estate Labels & error messages Maintain interaction patterns

Colors Fonts Icons Visual design

STEP 1

STEP 2: What? What functionality is

absolutely necessary? Categorize your

requirements

Courtesy: 280 Group

Creating wireframes

STEP 3: Who?

STEP 4: How? Sketch first, wireframe later Add as much detail as

possible Simulate flow and

interactions

Which of your users will most likely use it? What is their skill set How will they use it

Courtesy: http://maryshaw.net/

Example

Wireframes annotated

Resources:http://notableapp.comhttp://flairbuilder.comhttp://omnigraffle.com

Feedback & refine

Resources:http://www.loop11.comhttp://www.intuitionhq.com/http://openhallway.com/http://www.crazyegg.com

Pattern libraries don’t reinvent the wheel

Resources:developer.yahoo.com/ypatterns/http://patterns.endeca.comhttp://www.welie.com/http://ui-patterns.com/http://patternry.com/

Improve error messages

Remember the tone! Talk like a person, not a database Slightly self deprecating and never blame the

user Let the user know what to do next

What do we call “it”?

Who is the user and what will they most easily get?

Is “Submit” or “Save” better? Should the button be “Add Batch File” or “New

Email List”

Remember the tone! Decide naming conventions early in the cycle Publish and share naming paradigms within the

organization

Remember

Blank Slates: What will the user see when they visit a page for the first time?

Good Defaults: Answer the most common questions

Minimalist: Pareto Rule Minimize distractions Only show what’s needed Less is sometimes more!

Publish standards so mistakes they are avoided

Communicate mistakes so they’re not repeated

Spread the word!

Create design guidelines Create templates Stress the details and share the stress Point out the little things to engineering & QA

– they will take notice! Inspire engineers & QA to get excited about

the things you are excited about

Example of guidelines

Capitalization Labels

Title Case. The only exception is for radio buttons/checkboxes.

Avoid the use of articles (a, the)

Should be as short as possible

Use familiar words Buttons … Menus … Tables …

Typography & Color

THANK YOU!

Send me feedback! http://www.linkedin.com/in/tulsid http://twitter.com/tulsid

RESOURCES

The next pages have resources that were used to create this presentation and other helpful sites & tools

Usability

alistapart.com lukew.com smashingmagazine.com theresaneil.wordpress.com www.useit.com UXBooth.com UXMagazine.com

4 must read books about design: Designing interfaces: Jenifer Tidwell Designing web interfaces: Theresa Neil & Bill Scott Don’t make me think: Steve Krugg The design of everyday things: Donald Norman

Design thinking

Authors John Maeda Nigel Cross Peter Rowe Tim Brown Thomas Lockwood

Online http://designthinking.ideo.com/ Also several You Tube videos

Wireframe

My Favorites Flairbuilder Balsamiq Omnigraffle

Online http://www.mockflow.com/ http://www.evolus.vn/Pencil/ https://gomockingbird.com/ http://www.powermockup.com/

Other Resources http://wireframes.linowski.ca http://inspirationfeed.com/2011/02/25-examples-of-

wireframes-and-mockups-sketches/ wireframes.tumblr.com