design hacks

Post on 28-Jan-2015

120 Views

Category:

Technology

2 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

Design HacksJust Enough Design for an MVP

Laura Klein@lauraklein

laura@usersknow.comhttp://www.usersknow.com

Thursday, April 18, 13

Designers Will Hate This Presentation

Thursday, April 18, 13

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

Some (Very Basic) Design Tips

Thursday, April 18, 13

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

Thursday, April 18, 13

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

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

Not Like This

hitting enter doesn’t post a comment...

except when it does.

Thursday, April 18, 13

Design 101: Tip #3

One primary call to action is the correct number.

Yes.Thursday, April 18, 13

Not Like This does this make anyone else miss

the 90s?

Hell no.Thursday, April 18, 13

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

get the point)

Thursday, April 18, 13

Not Like Thisfor all you queen/lil

wayne/bob dylan fans.

Thursday, April 18, 13

Design 101: Tip #5

Equivalent things should be shown equivalently

Thursday, April 18, 13

Not Like ThisI have never once

created an ad.

Thursday, April 18, 13

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

Imagine Comments

This product needs comments!

Thursday, April 18, 13

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

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

Step 2: Find Design Patterns

Thursday, April 18, 13

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

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

Thursday, April 18, 13

Step 5: Prototype It

Interactive Prototype Not Pictured Here

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

Thursday, April 18, 13

Step 6: Test And Iterate

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

Thursday, April 18, 13

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

top related