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.

1. User Interface and
Experience

2. What we’ll look at
• How not to be a jerk
• Text
• Layout
• Flow

3. Remember:
It’s all about the user!

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. Not a jerk

6. Almost every restaurant site is poorly
designed, jerks.

7. I have no idea what these jerks
think they’re doing.

8. Kids hate pop-ups

9. • Users want to get what they want quickly
• Or they leave
• Don’t get in their way!

10. Text

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.

13. People don’t read.

14. How people read
online:
• They don’t
• They scan
• Bold and italics can draw their eye
• They may just look for links

15. How to write online
• Start with your conclusion
• Highlight keywords
• Bulleted lists
• Half the word count you want to use

16. More!
• One idea / paragraph
• Use meaningful sub-headings
• Don’t mix and match bold and italics
• Be consistent in formatting.

17. Even more
• Line spacing is important
• Blocks of text should be 8-12 words wide
and about 6 lines long

18. 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.

19. Layout

20. F

21. Headlines and lists

22. “Below the fold”
Doesn't exist

23. Blog

24. Blog

25. 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

26. 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

27. Look out for
• Archive navigation
• Clearly outline what the secondary content
is
• Hotlinking
• Clutter (visual, tags, ads, etc.)

28. Store

29. Store

30. Niche store

31. Generally stores,
• Large images
• Top navigation bar
• Categorized like a physical store
• Centred around the shopping cart idea

32. 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

33. Look out for
• Too much distracting the user
• Disconnect between the cart and site
• Users leaving to get more info

34. Promotional site

36. Promotional site

37. Generally promotional
sites,
• Put the product(s) front and centre
• Includes video of some sort
• Reflects ‘the feeling’ of the product

38. 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

39. Look out for
• Overwhelming the user with information
• Not being clear and appealing to the
audience
• How people find your site

40. Community site

41. Community site

42. 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

43. 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

44. Look out for
• Trolls
• Security of the site
• Off-topic posting and community migration
• You posting too much

45. Look out for
• Trolls
• Security of the site
• Off-topic posting and community migration
• You posting too much

46. Flow

47. Plan it out

48. What to plan
• Data flow
• User flow
• This can be vague or insanely detailed

49. 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?

50. 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?