Basic UX Design Principles

Download Basic UX Design Principles

Post on 21-Jan-2017

636 views

Category:

Design

4 download

TRANSCRIPT

  • Basic UX design principlesSasha Endoh @sashaendoh sashaendoh.com

    Peoples behavior makes sense if you think about it in terms of their goals, needs, and motives. Thomas Mann

    Basic UX design principlesSasha Endoh @sashaendoh sashaendoh.com

    Peoples behavior makes sense if you think about it in terms of their goals, needs, and motives. Thomas Mann

  • Ive been building websites since the 90sand have been running my dev & designbusiness for almost 9 years

    I got tired of:

    beingbroughtitafterthestrategicphaseiscomplete or without any strategic phase leading up to design

    seeingbusinessfailbecausetheydontbotherto consider their products user

    UX Design helps organizations thrive and gives users tools they actually need!

    Why me? Why UX design?

  • UXUI

    UI = User InterfaceHow people interact with your product (website/app)What colour should the button be?

    UX = User ExperienceHow people feel when they use your product Do we need that button at all?

    What UX isnt

  • What UX isnt (cont.)

    UXmakingwireframes

    Wireframing is an important part of the UX design process, but theres much more to it!

    You can very well make wireframeswithout any consideration for yourproducts user...

    Image credit: http://www.damienhe.com

  • UXcreatingexperience

    The user will have an experience using your product regardless of what you do or dont do.

    We want to make it a good experience!

    What UX isnt (cont.)

  • UX = strategic people pleasing

    People = users & client (employers etc.)

    Find out what everyone needs and wants: Users: information, better tools, money? Client: money, exposure, improved internal productivity, bigger community?

    Align everyones goals and needs: helping the client reach his/her business goals through giving the user what they need.

    What UX design is!

  • The most important and basic principle... ...but also the hardest part!

    Why its hard: takes lots of focus and persistence havetoboilthingsdowntotheircoreessence designersarevein;)-simpledoesntwinawards notnecessarilyinnovative

    Why it matters: theresanappropriatetimeandplaceforinnovation

    canimpactalargenumberofpeoplebymakingtheirliveseasier

    What does it mean?Dont make the user think or guess. Make the experience of using your product so straightforward that the user gets it right away.

    Keep it simple!!!

  • Might not be exciting but...

    workforalargegroupofpeople doesntmakeyouruserlearnnewthings

    The vast majority of projects dont require you to reinvent the wheel!

    Examples: Logoontopleftandlinkedtohomepage Mainnavigationacrossthetopordowntheleftside

    conventions are yoUr friends

  • Be consistent

    Create consistency by using design elements in a systematic way.Typography, colour, spacing, positioning

    Why? dontconfusetheuser set-upuserexpectation

    Consistency is one of the most powerful usability principles: when things always behave the same, users dont have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. Thats good.

    Jakob Nielsen web usability consultant oneof28BloombergBusinessweeksWorldsMostInfluentialDesigners,2010

  • Conserve the users energy

    Makeinformationfindable

    Example: yourstreetaddress yourphonenumber youremail yoursociallinks

    ... all ways to contact you!

    groUps related elements together

  • Use principles of visual design principles to clearly indicate clickable elementsContrast, weight, colour, and size

    clearly indicate Whats clicKaBle

    Image credit: http://www.webdesignerdepot.com

  • Your homepage is not the only entry to your website

    Lettheuserknow: wheretheyare whatsthisplaceallabout whatmoreisthere

    Use: signpostsandcues-pageheadings & navigation menus breadcrumbs

    everything eXists in conteXt

  • People dont read online, they scan & click on things that attract attention.No, they dont evaluate all the options. The cost of a wrong click is usually minimal.

    How: Create hierarchy Use headings to break up text

    Write short paragraphs Write lists

    maKe yoUr content scannaBle

    Image credit: http://chrismole.co.nz

  • Dont waste the users time

    Be concise and to the point Whentheuserbotherstoread-makeitcount.

    Keep noise and distractions to a minimumEach page should have a single goal or a focus. Everything less is noise and distracts the user from reaching his/her goal.

    Give few choices to avoid decision overwhelm.

    less is more

  • Make it load fastNot everyone has high speed Internet.

    Make it accessibleStart with optimizing for mobile (no mouse, limited thumb reach), remember the colour blind, oh and maybe the actuallyblind-theyalsousetheInternet.

    Use the language your audience understandsAvoid jargon to make it possible to anyone to understand your content. Use terms that they use.

    maKe it easy for everyone

    One should aim not at being possible to understand, but at being impossible to misunderstand. Quintilian Roman rhetorician

  • Your product is used by humans not machines

    Provide feedbackSuccess messages and error messages

    LimitoptionstopreventerrorsIf something isnt possible, say so

    Use appropriate defaultsIf everyone will want to unclick your default box then it oughtnt be checked by default.

    Give a reason when you ask something of your userEvenbetter-givesomethingtoyouruserbeforeaskingthemforsomething

    maKe interactions more hUman

    Image credit: http://uxmeme.tumblr.com

  • Dont lie

    Set-upclearexpectations

    Tell them why

    Be crediBle, transparent, and trUstWorthy

    I f we want users to like our software we should design it to behave like a likable person: respectful, generous and helpful. Alan Cooper creatoroftheGoal-Directeddesignmethodology

  • Talk to them, observe them, research them

    get to KnoW yoUr Users

    Know thy user, and you are not thy user. ArnieLund user experience professional andinnovatorinthefield

    Image credit: http://www.business2community.com

  • You only see a fraction of what UX design is

    Most of the process is outside of whats traditionally considered to be designNot in PhotoShop, and doesnt involve pixel pushing

    UserresearchUserinterviewingsGatheringstatisticsCreatingPersonasInformationArchitectureCreatingWireframesPrototypingUsabilitytestingUserInterfaceDesignVisualDesignInteractionDesignContentStrategyAccessibilityWorkingcloselywithdevelopersCommunicatingwithstakeholders

    UX design process

  • Theeasiestwaytofindoutwhatyourusers(andclients)wantistoaskthem!Of course, theres more to it...

    Types of research: askquestionsaboutwhatpeoplethink,howtheyfeel,theiropinionaboutsomething(subjective/qualitative) observeinteractionwithproducttogatherdata(objective/quantitative) lookforstatisticaldataonline(Googleisyourfriend)

    Never a bad time to do some researchBefore you do any sketching, after, or even after the product is up and running.

    research

    I f I would have asked people what they wanted, they would have said a faster horse. Henry Ford

  • A way to structure and organize your content that will frame the design

    Includes creating technical documents: Sitemaps:keepthemsimple,clear,andreadable. Userstories:helpstocomeupwithfeaturelistandstartthinkingabouterrorreduction. Wireframes:blueprintforyourproject.Keepstyleouroftheequation.

    information architectUre

    Image credit: https://docs.balsamiq.com

  • Dontmakemethink!bySteveKrug

    JustenoughresearchbyErikaHall Anything else that comes out of A Book Apart: abookapart.com

    UXMyths:uxmyths.com

    UXMag:uxmag.com

    U.S.GovernmentUsabilityWebsite:usability.gov

    fUrther reading

  • M akingthesimplecomplicatediscommonplace;making the complicated simple, awesomely simple, thats creativity.

    Charles Mingus

    thanK yoU!!Sasha Endoh @sashaendoh sashaendoh.com