0
User Interface and   Experience
What we’ll look at• How not to be a jerk• Text• Layout• Flow
Remember:It’s all about the user!
Always• Be direct and clear• Explain your website/service in less than a  sentence.• Follow what other people do• Be easy ...
Not a jerk
Almost every restaurant site is poorly          designed, jerks.
I have no idea what these jerks      think they’re doing.
Kids hate pop-ups
• Users want to get what they want quickly• Or they leave• Don’t get in their way!
Text
Don’t make them read•   Cater to the needs of the user•   Just because you think you have something good to say    (like t...
People don’t read.
How people read        online:• They don’t• They scan• Bold and italics can draw their eye• They may just look for links
How to write online• Start with your conclusion• Highlight keywords• Bulleted lists• Half the word count you want to use
More!• One idea / paragraph• Use meaningful sub-headings• Don’t mix and match bold and italics• Be consistent in formatting.
Even more• Line spacing is important• Blocks of text should be 8-12 words wide  and about 6 lines long
Ultimately• Write for the user to scan your site.• Be concise, link to more info.• Important information first.• Don’t use ...
Layout
F
Headlines and lists
“Below the fold”     Doesnt exist
Blog
Blog
Generally blogs,• Have primary content on the left (some on  the right)• Links and other secondary content on  opposite si...
Have a blog? Then• Use a mixture of content: • Videos, images, text, holograms• Link openly and freely (but not to jerks)•...
Look out for• Archive navigation• Clearly outline what the secondary content  is• Hotlinking• Clutter (visual, tags, ads, ...
Store
Store
Niche store
Generally stores,• Large images• Top navigation bar• Categorized like a physical store• Centred around the shopping cart i...
Have a store?• Copy the layout of Amazon or a similar  store in your niche• Use categorization people know• Frequent updat...
Look out for• Too much distracting the user• Disconnect between the cart and site• Users leaving to get more info
Promotional site
Promotional site
Generally promotional        sites,• Put the product(s) front and centre• Includes video of some sort• Reflects ‘the feelin...
Have a promotional      site? Then• Show the product• Give the user access to all the information  they may want• Quickly ...
Look out for• Overwhelming the user with information• Not being clear and appealing to the  audience• How people find your ...
Community site
Community site
Generally community        sites,• Provide a place to discuss/share in common  interests• Rely on community for some (or a...
Have a community site?        Then,• Be open, honest, and ready to change• Respect privacy and anonymity• Provide multiple...
Look out for• Trolls• Security of the site• Off-topic posting and community migration• You posting too much
Look out for• Trolls• Security of the site• Off-topic posting and community migration• You posting too much
Flow
Plan it out
What to plan• Data flow• User flow • This can be vague or insanely detailed
Data Flow• Where are you collecting data and from  what?• What are you collecting exactly?• What are you doing with data a...
User Flow• Starts the moment user sees site • Or advertising• What are the ways that people can find out  about your site?•...
Designing for the web
Designing for the web
Upcoming SlideShare
Loading in...5
×

Designing for the web

564

Published on

This is a presentation I gave as an intro to designing for the web. Like all presentations I do, this one is written to be fleshed out verbally so if you're just reading the slides you'll be missing a lot.

I can be reached on Twitter @MrFacePlant

This is online for some students who missed the presentation.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
564
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Designing for the web"

    1. 1. User Interface and Experience
    2. 2. What we’ll look at• How not to be a jerk• Text• Layout• Flow
    3. 3. Remember:It’s all about the user!
    4. 4. Always• Be direct and clear• Explain your website/service in less than a sentence.• Follow what other people do• Be easy to find• Stay consistent in your design
    5. 5. Not a jerk
    6. 6. Almost every restaurant site is poorly designed, jerks.
    7. 7. I have no idea what these jerks think they’re doing.
    8. 8. Kids hate pop-ups
    9. 9. • Users want to get what they want quickly• Or they leave• Don’t get in their way!
    10. 10. Text
    11. 11. Don’t make them read• Cater to the needs of the user• Just because you think you have something good to say (like this sentence) doesnt mean people read it; think about it, you are probably wishing you never started this sentence now as it’s really long and just looks very boring, like, really, really boring.• You may have noticed that the text on this slide is smaller than the rest of the slides in this presentation. The reason for that is to demonstrate how annoying having a lot of text can be. If you’re still reading this, I’m impressed as I’m bored and I’m the one writing it.
    12. 12. People don’t read.
    13. 13. How people read online:• They don’t• They scan• Bold and italics can draw their eye• They may just look for links
    14. 14. How to write online• Start with your conclusion• Highlight keywords• Bulleted lists• Half the word count you want to use
    15. 15. More!• One idea / paragraph• Use meaningful sub-headings• Don’t mix and match bold and italics• Be consistent in formatting.
    16. 16. Even more• Line spacing is important• Blocks of text should be 8-12 words wide and about 6 lines long
    17. 17. Ultimately• Write for the user to scan your site.• Be concise, link to more info.• Important information first.• Don’t use text to convey everything.
    18. 18. Layout
    19. 19. F
    20. 20. Headlines and lists
    21. 21. “Below the fold” Doesnt exist
    22. 22. Blog
    23. 23. Blog
    24. 24. Generally blogs,• Have primary content on the left (some on the right)• Links and other secondary content on opposite side• Header space for ‘branding’• Are regularly updated• Use tags and categories for posts
    25. 25. Have a blog? Then• Use a mixture of content: • Videos, images, text, holograms• Link openly and freely (but not to jerks)• Make commenting obvious or remove it• Integrate with existing social web systems
    26. 26. Look out for• Archive navigation• Clearly outline what the secondary content is• Hotlinking• Clutter (visual, tags, ads, etc.)
    27. 27. Store
    28. 28. Store
    29. 29. Niche store
    30. 30. Generally stores,• Large images• Top navigation bar• Categorized like a physical store• Centred around the shopping cart idea
    31. 31. Have a store?• Copy the layout of Amazon or a similar store in your niche• Use categorization people know• Frequent updates to front page• Getting people to give you $ is the goal• Incorporate the social web stuff
    32. 32. Look out for• Too much distracting the user• Disconnect between the cart and site• Users leaving to get more info
    33. 33. Promotional site
    34. 34. Promotional site
    35. 35. Generally promotional sites,• Put the product(s) front and centre• Includes video of some sort• Reflects ‘the feeling’ of the product
    36. 36. Have a promotional site? Then• Show the product• Give the user access to all the information they may want• Quickly inform people where they can get your product• Have a way for people to stay in contact
    37. 37. Look out for• Overwhelming the user with information• Not being clear and appealing to the audience• How people find your site
    38. 38. Community site
    39. 39. Community site
    40. 40. Generally community sites,• Provide a place to discuss/share in common interests• Rely on community for some (or all) content and moderation• Have an inverted pyramid of participation
    41. 41. Have a community site? Then,• Be open, honest, and ready to change• Respect privacy and anonymity• Provide multiple ways for members to communicate to one another• Create OC and ‘garden;’ respect the OP
    42. 42. Look out for• Trolls• Security of the site• Off-topic posting and community migration• You posting too much
    43. 43. Look out for• Trolls• Security of the site• Off-topic posting and community migration• You posting too much
    44. 44. Flow
    45. 45. Plan it out
    46. 46. What to plan• Data flow• User flow • This can be vague or insanely detailed
    47. 47. Data Flow• Where are you collecting data and from what?• What are you collecting exactly?• What are you doing with data and where is it being used?• Where and how are you storing it?• Are you sharing data with 3rd parties?
    48. 48. User Flow• Starts the moment user sees site • Or advertising• What are the ways that people can find out about your site?• How do they get to your site?• What do you want the user to do vs. what they can do?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×