Successfully reported this slideshow.
Your SlideShare is downloading. ×

Designing for the web

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Starting an online community
Starting an online community
Loading in …3
×

Check these out next

1 of 50 Ad

Designing for the web

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

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) doesn't 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” Doesn't 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?

Editor's Notes

  • \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

×