Make your website more
  user friendly (UX)

  Slides: kimmel.github.com
     Twitter: @KirkKimmel
This presentation is cat pics FREE.
Make your website more user friendly (UX)
“Usability people are in the business of
   telling people their baby’s ugly,”
“We don’t just say, ‘Your baby’s ugly,’ we say,
‘here’s how we make this baby pretty.’ And it’s not
  just about pretty; it’s about useful and usable.”

             - Professor Randolph Bias
                 University of Texas
Overview
●   A little background history and theory
●   How UX fits into the overall design plan
●   Understand your audience
●   The web is not print
●   Content and typography
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Make your website more user friendly (UX)
“If we want users to like our software, we should
    design it to behave like a likeable person.”
                   – Alan Cooper
Usability is:
● Learnability
● Efficiency


● Memorability


● Errors


● Satisfaction
Make your website more user friendly (UX)
How UX fits into the overall design plan
The Surface
The
Skeleton
The
Structure
The
Scope
The
Strategy
Make your website more user friendly (UX)
If it were only that simple.
Make your website more user friendly (UX)
Alright take a deep breath.
Just know this structure exists and keep the chart
               handy for reference.
Make your website more user friendly (UX)
Understand your audience
Make your website more user friendly (UX)
●  Prototype
● Benchmark


   ● Refine
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Make your website more user friendly (UX)
“The control which designers know in the print
 medium, and often desire in the web medium, is
  simply a function of the limitation of the printed
 page. We should embrace the fact that the web
doesn’t have the same constraints, and design for
 this flexibility. But first, we must “accept the ebb
                   and flow of things.”
                     - John Allsopp
Make your website more user friendly (UX)
Content and typography
Make your website more user friendly (UX)
Got any tips?
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Examples
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Make your website more user friendly (UX)
Make your website more user friendly (UX)
References:
●   http://500px.com/photo/18564175 - looking through fence
●   http://500px.com/photo/18513943 - falling water
●   http://500px.com/photo/17081637 - library
●   http://500px.com/photo/18563883 - contrast
●   http://500px.com/photo/1293346 - baby foot
●   http://500px.com/photo/9783481 - signs
●   http://500px.com/photo/8728971 - minimal movement
●   http://500px.com/photo/18352931 - at the top
●   http://500px.com/photo/7994458 - trash bin man
●   http://500px.com/photo/4609949 - time leaves
●   http://500px.com/photo/16100007 - purple berries
●   http://500px.com/photo/18548635 - stairs
●   http://500px.com/photo/18429045 - barrels
●   http://500px.com/photo/4766384 - chain
●   http://500px.com/photo/5623833 - little nibble
●   http://500px.com/photo/15267855 - eat everything
●   http://500px.com/photo/8576203 - the brain
●   http://500px.com/photo/6007671 - into the light
●   http://500px.com/photo/14020155 - red hats
●   http://opencage.info/pics.e/large_9185.asp - penguin skeleton
●   http://500px.com/photo/10121187 - window grid
●   http://500px.com/photo/9103367 - deck surface
●   http://www.fotopedia.com/items/flickr-7586194578 - structure
●   http://www.fotopedia.com/items/flickr-2222548359 - earth
●   http://www.jjg.net/elements/pdf/elements_ch02.pdf - Usability planes

●   Books:

●   The Elements of User Experience by Jesse James Garrett
●   Designing Web Usability by Nielsen
●   The Design of Everyday Things by Norman
●   About Face 3.0: The Essentials of Interaction Design by Cooper

More Related Content

PDF
Skillswap - Back To Basics
PDF
Javascript isn't hard
PDF
RSCON 3 Slideshow: Teaching in a messy classroom
PDF
Real World Web: Performance & Scalability
PDF
The wheel is spinning but the hamster is almost dead - Smartweb 2015
PPTX
GCC 10-30-15
PPTX
Salgs presentasjon3
DOC
An evaluation of distributed datastores using the app scale cloud platform
Skillswap - Back To Basics
Javascript isn't hard
RSCON 3 Slideshow: Teaching in a messy classroom
Real World Web: Performance & Scalability
The wheel is spinning but the hamster is almost dead - Smartweb 2015
GCC 10-30-15
Salgs presentasjon3
An evaluation of distributed datastores using the app scale cloud platform

Similar to Make your website more user friendly (UX) (20)

PPTX
Usability and Accessibility Have a Conversation: How Accessibility and UI/UX ...
PPTX
Library Website Evaluation
PPT
An Introduction to Usability
PDF
Don’t Just Build Pretty Websites — UX in the Real World
PDF
Web authoring design-basics
PDF
User Experience and WordPress
PPTX
Intro to UX Design
PDF
NYU Web Intensive - Week 3 Class 1
PPTX
Websites That Work - NEHGS website usability presentation
PPTX
Ui and ux principles
PDF
User Experience Design: an Overview
PDF
Web valley talk - usability, visualization and mobile app development
PPT
Designing Web Interfaces
PDF
User experience. What is it anyway?
PDF
Usability for Web Designers
PDF
Producing design solutions
PDF
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
PDF
Usability 101
DOCX
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
PPTX
Designing and evaluating web sites using universal design principles (hands on)
Usability and Accessibility Have a Conversation: How Accessibility and UI/UX ...
Library Website Evaluation
An Introduction to Usability
Don’t Just Build Pretty Websites — UX in the Real World
Web authoring design-basics
User Experience and WordPress
Intro to UX Design
NYU Web Intensive - Week 3 Class 1
Websites That Work - NEHGS website usability presentation
Ui and ux principles
User Experience Design: an Overview
Web valley talk - usability, visualization and mobile app development
Designing Web Interfaces
User experience. What is it anyway?
Usability for Web Designers
Producing design solutions
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Usability 101
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
Designing and evaluating web sites using universal design principles (hands on)
Ad

Make your website more user friendly (UX)

  • 1. Make your website more user friendly (UX) Slides: kimmel.github.com Twitter: @KirkKimmel
  • 2. This presentation is cat pics FREE.
  • 4. “Usability people are in the business of telling people their baby’s ugly,”
  • 5. “We don’t just say, ‘Your baby’s ugly,’ we say, ‘here’s how we make this baby pretty.’ And it’s not just about pretty; it’s about useful and usable.” - Professor Randolph Bias University of Texas
  • 6. Overview ● A little background history and theory ● How UX fits into the overall design plan ● Understand your audience ● The web is not print ● Content and typography
  • 10. “If we want users to like our software, we should design it to behave like a likeable person.” – Alan Cooper
  • 11. Usability is: ● Learnability ● Efficiency ● Memorability ● Errors ● Satisfaction
  • 13. How UX fits into the overall design plan
  • 20. If it were only that simple.
  • 22. Alright take a deep breath. Just know this structure exists and keep the chart handy for reference.
  • 26. ● Prototype ● Benchmark ● Refine
  • 30. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” - John Allsopp
  • 44. References: ● http://500px.com/photo/18564175 - looking through fence ● http://500px.com/photo/18513943 - falling water ● http://500px.com/photo/17081637 - library ● http://500px.com/photo/18563883 - contrast ● http://500px.com/photo/1293346 - baby foot ● http://500px.com/photo/9783481 - signs ● http://500px.com/photo/8728971 - minimal movement ● http://500px.com/photo/18352931 - at the top ● http://500px.com/photo/7994458 - trash bin man ● http://500px.com/photo/4609949 - time leaves ● http://500px.com/photo/16100007 - purple berries
  • 45. http://500px.com/photo/18548635 - stairs ● http://500px.com/photo/18429045 - barrels ● http://500px.com/photo/4766384 - chain ● http://500px.com/photo/5623833 - little nibble ● http://500px.com/photo/15267855 - eat everything ● http://500px.com/photo/8576203 - the brain ● http://500px.com/photo/6007671 - into the light ● http://500px.com/photo/14020155 - red hats ● http://opencage.info/pics.e/large_9185.asp - penguin skeleton ● http://500px.com/photo/10121187 - window grid ● http://500px.com/photo/9103367 - deck surface ● http://www.fotopedia.com/items/flickr-7586194578 - structure ● http://www.fotopedia.com/items/flickr-2222548359 - earth ● http://www.jjg.net/elements/pdf/elements_ch02.pdf - Usability planes ● Books: ● The Elements of User Experience by Jesse James Garrett ● Designing Web Usability by Nielsen ● The Design of Everyday Things by Norman ● About Face 3.0: The Essentials of Interaction Design by Cooper

Editor's Notes

  • #2: \n \n \n \n \n \n
  • #3: \n \n \n \n \n
  • #4: \n \n \n \n \n
  • #5: \n \n \n \n \n
  • #6: \n \n \n \n \n
  • #7: \n \n \n \n \n
  • #8: \n \n \n \n \n
  • #9: \n \n \n \n \n
  • #10: \n \n \n \n \n
  • #11: \n \n \n \n \n
  • #12: \n \n \n \n \n
  • #13: \n \n \n \n \n
  • #14: \n \n \n \n \n
  • #15: \n \n \n \n \n
  • #16: \n \n \n \n \n
  • #17: \n \n \n \n \n
  • #18: \n \n \n \n \n
  • #19: \n \n \n \n \n
  • #20: \n \n \n \n \n
  • #21: \n \n \n \n \n
  • #22: \n \n \n \n \n
  • #23: \n \n \n \n \n
  • #24: \n \n \n \n \n
  • #25: \n \n \n \n \n
  • #26: \n \n \n \n \n
  • #27: \n \n \n \n \n
  • #28: \n \n \n \n \n
  • #29: \n \n \n \n \n
  • #30: \n \n \n \n \n
  • #31: \n \n \n \n \n
  • #32: \n \n \n \n \n
  • #33: \n \n \n \n \n
  • #34: \n \n \n \n \n
  • #35: \n \n \n \n \n
  • #36: \n \n \n \n \n
  • #37: \n \n \n \n \n
  • #38: \n \n \n \n \n
  • #39: \n \n \n \n \n
  • #40: \n \n \n \n \n
  • #41: \n \n \n \n \n
  • #42: \n \n \n \n \n
  • #43: \n \n \n \n \n
  • #44: \n \n \n \n \n
  • #45: \n \n \n \n \n
  • #46: \n \n \n \n \n