Designing for the web

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 to ﬁnd• Stay consistent in your design

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!

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.

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 ﬁrst.• Don’t use text to convey everything.

Layout

Headlines and lists

“Below the fold” Doesnt exist

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

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

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

Niche store

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

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

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

Promotional site

Generally promotional sites,• Put the product(s) front and centre• Includes video of some sort• Reﬂects ‘the feeling’ of the product

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

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

Community site

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

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

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

Plan it out

What to plan• Data ﬂow• User ﬂow • 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 and where is it being used?• Where and how are you storing it?• Are you sharing data with 3rd parties?

User Flow• Starts the moment user sees site • Or advertising• What are the ways that people can ﬁnd out about your site?• How do they get to your site?• What do you want the user to do vs. what they can do?

Designing for the web

by Wero Creative on Feb 17, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 104

Statistics

Designing for the web — Presentation Transcript