• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HICapacity UI talk by Tiffany Higa
 

HICapacity UI talk by Tiffany Higa

on

  • 1,840 views

HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design. ...

HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.

These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.

These are the UI slides by

Event info: http://www.hicapacity.org/2013/05/23/ui-ux/

Statistics

Views

Total Views
1,840
Views on SlideShare
326
Embed Views
1,514

Actions

Likes
2
Downloads
0
Comments
0

7 Embeds 1,514

http://hicapacity.org 1211
http://www.hicapacity.org 153
http://localhost 134
http://beta.sakuda.us 6
http://webcache.googleusercontent.com 6
http://10.0.1.35 3
http://hicap.dev 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HICapacity UI talk by Tiffany Higa HICapacity UI talk by Tiffany Higa Presentation Transcript

    • UX (user Experience)DEFINITION:“User experience” encompasses all aspects of the end-user’s interaction withthe company, its services, and its products.FACTORS TO CONSIDER:• Usability• Meets needs + values• Memorablewhy is it imporant?:• Happy customers = loyal + returning customers• Unhappy customers = loss of business + negative buzz
    • researchknow your user
    • DEFINED AS:A description of the overall characteristics of a target audience.• Sex, age, education, occupation, beliefs, etc.WHY IS IT IMPORTANT?:Helps to determine and rationalize design decisions.USER PROFILES
    • DEFINED AS:Hypothetical/fictional characters based on user profiles and other data. Theyrepresent different types of users.WHY IS IT IMPORTANT?:• Gives designers an idea of who they are designing for.• Ensures that a design will meet the needs of various users.PERSONAS
    • PERSONA EXAMPLE:http://blog.kissmetrics.com/user-personas-for-seo/
    • DEFINED AS:The description of how a persona might interact with a website in order toachieve a specific goal.User scenarios answer the following questions:• Who is the user?• What does the user want from my site?• Why does the user come to my site?• How is the user going to achieve their goal?WHY IS IT IMPORTANT?:• Identify what a user would need to accomplish a goal• Explore different design solutions• Identify potential problemsUSER SCENARIOS
    • USER SCENARIO EXAMPLE:
    • A friend has recommended amazon.com tohim. His friend was very enthusiastic about allthe features Amazon offers and above all howconvenient it works, which makes Johnny veryhappy because he doesn’t want to spend toomuch time looking for a book.Johnny has an idea of what kind of cupcake bookhe wants, and expects to be able to quickly findoptions to choose from. He also expects to readreviews from other users to find out which book isthe right one.Why does he come tomy site?How does he achievehis goal?Johnny is looking for a book about cupcakes, anddoesn’t want to spend more than $20.What does he wantfrom my site?
    • BEST PRACTICES(generally)
    • colortypographynavigationLINKSforms
    • • Appropriate color palette.COLOR
    • examples???
    • examplescreativekidscenter.net
    • examplesholykaw.alltop.com/the-psychology-of-color-for-web-designers-inf
    • examplesrxbalance.com
    • • Appropriate color palette.• High contrast between text and background.COLOR
    • examplesEASY TO READHARD TO READALSO HARD TO READ
    • colortypographynavigationLINKSforms
    • typography• Choose appropriate typefaces.
    • exampleswakwaw.com
    • examplesblacktomato.com
    • typography• Choose appropriate typefaces.• Hierarchy!
    • examplesvalleyisleaquatics.com
    • examplespaypal.com
    • typography• Choose appropriate typefaces.• Hierachy!• Optimal line length is 50-60 characters.
    • examplesvalleyisleaquatics.com
    • typography• Choose appropriate typefaces.• Hierachy!• Optimal line length is 50-60 characters.• Size does matter.
    • examplesbusiness.hibu.com
    • colortypographynavigationLINKSforms
    • navigation• Tradional location.
    • examplesvalencia-dmc.com
    • examplesmoremobilerelations.com
    • navigation• Tradional location.• Clear, concise, and distinct labels.
    • examplesjankoatwarpspeed.com
    • examplestarget.com
    • navigation• Tradional location.• Clear, concise, and distinct labels.• Make it clear where users have landed.
    • examplescraigslist.com
    • examplesbarnesandnoble.com
    • navigation• Tradional location.• Clear, concise, and distinct labels.• Make it clear where users have landed.• Consistent on every page.
    • colortypographynavigationLINKSforms
    • LINKS• Looks clickable.
    • examplesoutreach.hawaii.edu/pnm
    • LINKS• Looks clickable.• Obvious hover state.
    • examplesgriplimited.com
    • LINKS• Looks clickable.• Obvious over state.• Clear call to action button.
    • examplescrowdspottr.com
    • examplesmailchimp.com
    • colortypographynavigationLINKSforms
    • FORMS• Keep layout within one column.
    • examplesbaymard.com
    • FORMS• Keep layout within one column.• Labels are relevant and close in proximity.
    • examplesuxmovement.com
    • FORMS• Keep layout within one column.• Labels are relevant and close in proximity.• Immediate validation.
    • examplestwitter.com
    • examplestwitter.com
    • examplesbadforms.com
    • resourceswhere to look
    • resources• uxdesign.smashingmagazine.com• uxmag.com• uxbooth.com• nngroup.com• uxmovement.com• uxmatters.com• usabilitypost.com
    • tiff’s notesget it?
    • tiff’s notes• Know your user!• Colors have meaning.• Consider the right typeface and size.• HIERARCHY!• Pay attention to your line lengths.• Navigation is the user’s anchor.• Don’t make users guess what is clickableor what to do.• Forms in one column is best.• DON’T MAKE ME THINK!
    • questions?kat sakata @katroppitiff higa @thinktifferent