design hacks

25
Design Hacks Just Enough Design for an MVP Laura Klein @lauraklein [email protected] http://www.usersknow.com Thursday, April 18, 13

Upload: laura-klein

Post on 28-Jan-2015

120 views

Category:

Technology


2 download

DESCRIPTION

Some incredibly basic UX design tips for people with absolutely no design experience.

TRANSCRIPT

Page 1: Design hacks

Design HacksJust Enough Design for an MVP

Laura Klein@lauraklein

[email protected]://www.usersknow.com

Thursday, April 18, 13

Page 2: Design hacks

Designers Will Hate This Presentation

Thursday, April 18, 13

Page 3: Design hacks

Before We Start: Say It With Me

I (state your name) do solemnly declare that I have spoken to my users and discovered a problem that this design is intended to solve.

I have validated that this problem is real and that people want me to solve it for them and might even pay me for it.

Thursday, April 18, 13

Page 4: Design hacks

Some (Very Basic) Design Tips

Thursday, April 18, 13

Page 5: Design hacks

Design 101: Tip #1Information should be in close proximity to your CTA.

Thursday, April 18, 13

Page 6: Design hacks

Not Like This

useful informationCTA

Instructions that wouldn’t be necessary without the division.

user decisions

Yeah. I know they make a boatload of money. This page is still not optimized for this sort of purchase.

Thursday, April 18, 13

Page 7: Design hacks

Design 101: Tip #2

Actions should work the same everywhere.

This icon means search. Except when it means enlarge.Stop doing that.

Thursday, April 18, 13

Page 8: Design hacks

Not Like This

hitting enter doesn’t post a comment...

except when it does.

Thursday, April 18, 13

Page 9: Design hacks

Design 101: Tip #3

One primary call to action is the correct number.

Yes.Thursday, April 18, 13

Page 10: Design hacks

Not Like This does this make anyone else miss

the 90s?

Hell no.Thursday, April 18, 13

Page 11: Design hacks

Design 101: Tip #4Everything is not Pinterest (or Facebook or Twitter or...you

get the point)

Thursday, April 18, 13

Page 12: Design hacks

Not Like Thisfor all you queen/lil

wayne/bob dylan fans.

Thursday, April 18, 13

Page 13: Design hacks

Design 101: Tip #5

Equivalent things should be shown equivalently

Thursday, April 18, 13

Page 14: Design hacks

Not Like ThisI have never once

created an ad.

Thursday, April 18, 13

Page 15: Design hacks

Best “Design” Advice Ever

It’s not stealing, it’s “inspiration”

PatternTap.comMobile-Patterns.com

ui-patterns.compatternry.com/patterns

smileycat.com/design_elements

You can thank me later.

Thursday, April 18, 13

Page 16: Design hacks

Imagine Comments

This product needs comments!

Thursday, April 18, 13

Page 17: Design hacks

Step 1: What’s It For?

User Need Business Need

I want to know which products people like. Sell more products.

I want to chat with my friends. Increase engagement.

I want to talk about a subject I care about. Increase retention.

I like to yell at people anonymously. Increase clicks on content.

Thursday, April 18, 13

Page 18: Design hacks

Step 1: What’s It For?

User Need Business Need

I want to know which products people like. Sell more products.

I want to chat with my friends. Increase engagement.

I want to talk about a subject I care about. Increase retention.

I like to yell at people anonymously. Increase clicks on content.

Thursday, April 18, 13

Page 19: Design hacks

Step 2: Find Design Patterns

Thursday, April 18, 13

Page 20: Design hacks

Step 3: Refine Your Necessary Features

Rating systemCommentingFlaggingProfile PicName of CommenterNumber of Comments MadeWay to Navigate CommentsEdit/Delete for CommenterCommenter Reputation

unlikely to know person by sight.

unnecessary if nobody leaves a comment!

test this later

Thursday, April 18, 13

Page 21: Design hacks

Step 4: Sketch ItOops. That’s not an MVP requirement!

Thursday, April 18, 13

Page 22: Design hacks

Step 5: Prototype It

Interactive Prototype Not Pictured Here

Because It’s Hard to Take a Picture of a Prototype

Thursday, April 18, 13

Page 23: Design hacks

Step 6: Test And Iterate

This is also steps 7 - n where n equals your users not being horribly confused.

Thursday, April 18, 13

Page 24: Design hacks

Step N+1: Release, Test & Iterate Even More

You’re not done yet! Watch users in the wild and don’t forget that a/b test!

Thursday, April 18, 13