web applications with personality
Post on 27-Jan-2015
106 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related