ux design musings

[vivekgopal]

I don’t use the words 'affordances' or 'signifiers.' I would just say that’s a f*ing button.

-Nevan

[vivekgopal]

Hook and Loop: On-Site Preso Notes

Hook and Loop (@hookandloopnyc) Class Field Trip 1/20/15 Get to prototyping quickly (@hellojeehae) 3-5 user interviews per user group (@sabrinaaa) Sweet spot Once users start repeating stories / themes then you can shorten interviews Multi-tenancy (@V51JVd) Is this supported? Design sprints - 2 wk times with mini MVP deliverables. Led by developers. Apple Human interface WWDC lecture (@talkaboutdesign) IA -> design -> dev (flow) "Measure twice, cut once." Make / show / learn (Listen and ask questions) Mirror iPhone in screen preso (Reflector app) Marvel like POP So hot! Test light go outside - see if colors need tweaking Keynote / Photoshop Used iPad to animate assets (soccer players profiles) If prototype not finished, ask users: "What would you imagine would happen here?" In the beginning do many sketches! "In beginner's mind there are many possibilities." -Zen saying Sketch using actual size. The Dynamic web (@tedkusio) Amazon e.g. shopping for... Spider-Man Your Wireframe needs to accommodate all options Shirt Toy Movie "Tyrone shorten your name," design where user has a long name.

Did you account for this in your prototype? If there's one thing I want to impart: Fluidity / dynamism Internationalization What about when your site is translated into German? Those buttons won't be nice and neat fitting then.

Button size needs to take into account. Responsive designs Desktop vs tablet vs mobile But what about in between states?  Android has numerous sizes.  Even Apple has now gone this way. "What standard break points do you design for?" None - changes per project. Rather where do you have collision of data? (Think of poor Tyrone) Don't design for a specific device, make it work for all.  For website don't have to. For app, sure. iPad landscape is 1024 same as web. 768 is portrait HL process (flow) goes back and forth (IA -> Design -> Dev) Dev love annotated wireframes :)

And candy!

When speaking to developers (about your wires): Just state the problem Don't give the solution Detail the process Tips for dealing with dev: When in doubt, ask. There is no formula!  Which I think makes UX metholodogy so great :)  "Be really really great at one thing." (@V51JVd) Design vs development

During conflicts: Check your ego at the door Don't respond right away Fights tend to happen early on. Provide reasoning for your choice. "I don't like harmberyger menus." <-- is not valid. Must say why.

"Because I'm vegetarian." -@tedkusio Must be an advocate of users and through your research keep bringing the team back to (focus on) them. When design changes, need to update annotation "Affordance for that functionality" (just liked that phrase).

[vivekgopal]

UX Panel discussion notes from 1/16.

The letters D, C, N, T stand for the panelists.  Nevan is abbreviated as "Nevan".

[vivekgopal]

Challenging UX Convention

Project 2 Presos

What an eventful day.  Our instructors kept us honest on time and we ended it right @ 5 pm after 7+ hrs of crit on our Micro Site designs.

We celebrated @lukeuxdi's birthday with donuts and there was a euphoria in the air once Zoe and Luke's wife came in with the donuts.  

(Above sitting in the kitchen on break during presos.  Photo credit: @mikyremm) 

Musings

I brought up a point in my preso that perhaps there's more to UX than pleasing users.  For instance, what if pleasing users is more harmful to them, rather than helpful?  

What about sadists and masochists? 

My persona Dexter goes through a user flow where he discovers a shock-value item that's outrageously priced and thus begs him to purchase it, and which he does.  But Dexter continues through the site and returns to a more modestly-priced item, which satisfies him more than the shock item.  He purchases both - thus lending credence to the theory that the user is expanding his/her horizons.  I.e. gaining self-awareness.

And this is where I come in...

What do we mean by UX and particularly good UX?

I see a new frontier within UX that involves helping users to discover themselves.  Even as a society, what more do we need than that pizza the moment you press the push for pizza button?

Perhaps we need self-knowledge.  Why do I always eat when I'm [upset | self-loathing | anxious | fill in the blank]?

Or why do I feel [upset | self-loathing | anxious | fill in the blank] in the first place? 

Why? Why? Why? Why? Why?

Self-Discovery

The 4 Lists method addresses the pain-pleasure spectrum, but the spectrum of human experience is more.  There have been significant studies done in the field of happiness.  As an example, see this section in Huff Post.

Even at a cursory view, pain and pleasure appear more immediate but the depth of human experience (and perhaps the length of it) suggests that we,  as UX designers, are just scratching the surface of what our field could open up.

Not possible you say?

"If I had asked people what they wanted, they would have said faster horses.” -Henry Ford

"If I had asked people what [they foresaw in the future], they would have said [an incremental iteration over the present version].” 

I'm suggesting a paradigm shift in the way we view UX.  And perhaps it's my naïveté and newness to the field that let me feel comfortable challenging convention.  

Peace.

[sh541-deactivated20150318]

"You cannot not design."

Erika Hall (via sh541)

[sh541-deactivated20150318]

Learning.

[sh541-deactivated20150318]

"Your web layout should look like good ketchup tastes."

Nevan Scott, continuing his 11-day streak of killing it. (via sh541)

[vivekgopal]

Bad navigation design between 3rd and 4th fl restroom hand dryers @GA. On one side on one floor, on the other side on the other floor. i.e. Don’t make me think. #stevekrug

Contextual inquiry. Courtesy of GA.

[aliviaduran-deactivated20180406]

Shoulda been there! Things you missed at the UX Holiday Party: Shenanigans with tounafish​ sh541​ & vivekgopal​, Holiday Flows and Photo booths. 

[vivekgopal]

I so love this. -Vivek

[aliviaduran-deactivated20180406]

10 Principles of Design from Dieter Rams

Good Design Is Innovative  Good Design Makes a Product Useful  Good Design Is Aesthetic  Good Design Makes A Product Understandable  Good Design Is Unobtrusive Good Design Is Honest  Good Design Is Long-lasting  Good Design Is Thorough Down to the Last Detail  Good Design Is Environmentally Friendly Good Design Is as Little Design as Possible 

[vivekgopal]

I would just add: "Bam."

[vivekgopal]

Week 2: Andrew Tarvin Workshop

Ask interesting questions when networking.  

Please don't ask "So what do you do?"

Try: "What's the most interesting thing you did recently?" Know your purpose prior to going to networking events - Decide whether you want long vs short convos. Must read: Dale Carnegie How to win friends and influence people Tell interesting stories Write them down.  Rehearse them almost. Find connections based on:

where you grew up

college

interests

Keep "Yes, and..." in the convo and it can go endlessly. Understand and recognize the power of silence - interview techniques for you and the interviewer.  Interviewers may keep silence to see if you'll keep talking out of nervousness.  Remain calm.  Don't waste words needlessly. Body language Para language Math problem convo - we cannot multitask - being clear.

[vivekgopal]

Week 2 Remainder Summary

So here goes :)

Useless Superpowers

At Friday night happy hour, my classmates and I tried to come up with the most useless superhero powers.  Here are mine: 

The ability to produce at will only one square of toilet paper in a stall when the dispenser has run out.

The ability to singe any person's one eyebrow.

The ability to add Blue 5 or Yellow 5 to anyone's drink.

The ability to change anyone's iPhone 6 into an iPhone 4.

My classmates concluded that I'm cruel and e-eevil.

UXDI Alumni Panel

A totally interesting panel.  So glad I attended.  (I was planning to skip out to visit a company I'm eyeing...)

1) What would you wish you'd known before going through UXDI? Trust yourself. Immerse yourself in the program - sacrifice your other activities (like Aaron) Know that you will know more than you realize. Put yourself out in the industry - don't be afraid to do this. (Networking) Be very diligent in documenting everything. (Tumblr) 2) When to prep for job search and how? Figure out your personal brand and your narrative (including your past). Start now. Position yourself in the industry.  Interaction designer? Information Architect? Find out what you love ab UX. Make awesome stuff first. Do a case study - make it really good - so you don't have to redo it (like most students after class ends). This particular speaker's portfolio was done 2 days after class. Go to meetups - meet UX people for coffee.  

Just ask them out (for coffee, silly). Meet as many people as you can. Explain to WDI students what you are as a UX designer.  Helps you create your narrative. Iterate your portfolio - your job search process (?) Practice your elevator pitch and your longer pitch. Put your project work in folders.

3) Walk us through your previous work day. User testing - SBO (what does this mean? Search brand optimization?) Wireframes FB google Etsy - everyone switching to Sketch Broadcast - watch video of users during user testing Contextual inquiry - pipe cleaners so ppl could play Loreal (no idea what this means) GA Circuits - mentor - code challenges Took dev team thru wireframes Annotate them too - clickable deck Teach for America - initial research already done Usability test across country 4) What do you wish you'd learned in GA? Learn Adobe products Illustrator Photoshop Sign up for Profiles - Internal GA LinkedIn Do not be afraid to ask UX ppl / networking out for coffee. Start having conversations - make convo more about them. Don't talk too much about GA.  (Sometimes people are not so interested in your amazing program.) Focus on what you learned when you get coffee with UX people.   5) UX Interview Questions Design test. Product - come up with UX research plan - and present to as if client. Challenges - living social - Adobe news - make a prototype Pushed back when they asked her to code.  They acquiesced.  Don't be afraid to show your personality - companies and hiring managers want to work with fun people. Whiteboard - user journey Go to multiple job fairs.

6) Resources

Smashing magazine Box's and arrows Mail chimp ux newsletter Envision newsletter Pick most inspired companies - follow them on Twitter and LinkedIn. Pocket (reading app) iOS human interface guidelines Steve Krug - read his 2 books Hooked by Nir Eyal (very high recommend)

Design of Everyday Things (everyone in the industry will assume you've read it - so read it!)

[rosekue]

http://uxchecklist.github.io/

[vivekgopal]

Week 2. Day 6 Summary

"And if someone comes around and pisses you off, just give them the sixth finger."

... or you can just draw all the things.

A lot of class centered around the discussion between art and design and stemmed from this John Maeda quote: 

"While great art makes you wonder, great design makes things clear."

Good innovation as disruption. Ex. Sony's transistor radio in the 1950's.  

"You cannot not design." -Erika Hall

Let usability (not us as designers) be the lens through which we assess good design. 

How do you design a layout for a museum?  Is it art?

Design seeks to evoke System 1 response (uncontrolled).

Art seeks to evoke System 2 (thoughtful).

Symmetry / golden ratio all evoke system 1.  Mess with symmetry (on purpose, of course) and you trigger a system 1 response.

Magazine cover often read "101 Sex Tips", etc - not 100, not 102, or other even / round numbers - why?  Touna (who came from an ad background) said it's due to symmetry.  If things are too neat and perfect, there's no need to touch it / to take the package off the shelf.

... but if it's 103 tips, then it's like whoa! 103 is such an odd and crazy number.  Let me turn the page to find out what's up with that.

To wrap up the discussion, Luke left it with "good things happen when art is interpretable.  But bad things happen when design is interpretable (and hence not clear)."

Then he asked what I thought.  I said, "Well inherently I agree with you.  I just don't want to agree with you."

Waterfall Method

Passes from one team to the next.  Goals > Design > Dev > (rinse and repeat)

Are you simply chopping assets as a visual designer /

Twitter Bootstrap - style guide.

"When you mess with System 1, people swipe like crazy." - Luke

Remember the 6th finger device.  An obvious diversion to manage an over-obsessed stakeholder.  

...or you can simply bring stakeholders into the discussion earlier, no?

The Five Whys

My example solution: We need 5-7 min breaks every 90 min during class.

My example problem: We need more breaks in class. Why?

To break the space and flow of the class.  Why?

Need to stretch, activate muscles, increase blood flow.  Why?

To prevent falling asleep.  Why?

So I can get an awesome job in UX once I graduate.

How do I create work for others (as a UX designer)?  Be mindful that developers will have to implement your prototypes etc.

Business Analysis

How Luke got into design / UX - he would screenshot every app / website he could find and reverse engineer it.  

Breakpoint - what your users see (in terms of px for screen size).  e.g. 640 px = ipad

Notes to Self

Noticing that these posts are getting snarkier. At least they'll be fun read 10 weeks from now. Cheers.

Definitions:

Assets - typefaces, font faces, etc 

[vivekgopal]

Week 1 Draw

This graph depicts my emotional roller coaster this week.

The 4 faces (which I experienced multiple times during the week) indicate: 

Happy, inspired, thrilled, excited, ready. 

Sad, forlorn.

Hurting.

Exhausted, overwhelmed by intensity, pressed.

[vivekgopal]

Day 4 / Day 5 Summary (Part I)

Day 4 - Usability

Above: Image shows the evolution of usability - from utility > usability > desirability > brand.

Keys to Usability:

Learnability

Efficiency

Memorability

Errors

Satisfaction

Learnability

Old school game Doom had a busted up face for a life-meter.  Co-locating the life meter on the spine indicates who is being affected in the game (you - the user).

When designing for Yahoo, had to code for lowest common denominator.  But at a company like Behance, you may make sick user tips because that enhances your brand.

iOS vs Android

Pull to refresh vs. cycles to ∞ 

Efficiency

Tip: Simply look at the number of diamonds on your user flow.

Progressive reduction is good, but don't do too soon.  Or it loses its value.

Definitions

"System 1" is fast, instinctive and emotional

"System 2" is slower, more deliberative, and more logical (wiki)

Day 5 - Project #1 Presentations

Simply blown away by the level of creativity and enthusiasm in my classmates.  Every presentation was stellar and the class resoundingly clapped after each presentation a number of times.  

There was also laughter.  Tons of it.   

[vivekgopal]

Day 2.5 / Day 3 Summary

The Compelling Reasons for Sketching

You'll be by yourself more than with your team and your users.  (And the ideas still need to be churning...)  So spend that time sketching.

Value of sketching

Rapid

Cheap

Easy to create

Fun

Invites feedback

Makes your brilliant ideas concrete

Keeps you from getting locked-in to a design (e.g. via coding)

"We want to explore many ideas.  Not lock you into one."  - Luke

That's how to sell UX to clients (who want the fancy mockup early on).  Training the clients is necessary.

Participatory Design

I like to think of this as a focus group, where your users help you make the product better.  It's often an arts-and-crafts affair - with many physical materials (cutouts, markers, tape, scissors) enabling the shuffling of materials "like refrigerator magnets"

Tips for good participatory design

Immerse users ahead of time

Provide users copies of the original material (so they're more likely to destroy it - j/k - so they're more likely to play with it).

Franken product

Personify the product (to help develop emotional connection w/ it)

Continue communication with users on subject afterward

How to Develop User Flows

First write up the steps user will take

Then draw as a user flow (with boxes and diamonds)

Pro tip: You can use user flows to find types of subscribers.  - Luke (drawing on WSJ experience)

Above: User Flow for my Project #1: Meet People. Do Stuff. (the app)

Storyboarding

Like a graphic novel

Emotional tone

Gives a higher level view of the user activities

Give life context to the user's use of the app, i.e. How's their day going that prompts their use of the your app.

Tips for Great Storyboarding

It's context for your 4 Lists ("Kabapal").  e.g.  for pains you can show your user with lightning bolts coming out of her elbows.

Additional benefit: storyboard can act as stand-alone marketing piece

http://sandwichvideo.com - Crisp videos for tech products

Wireframes / Wireflows

Above: Wireflows for my Project #1 design with annotations.  

Note: we were asked to sketch 6 - 18 variations of each of these screens, just to stretch our minds.  6 iterations in 5 min; rinse and repeat (by way of showing your partner).  

Pro tip: Don't annotate or draw lines inside the app image.  That way your prototype (if using POP or a similar app) remains clean.  

Stages of Sketching (i.e increasing fidelity in your prototypes)

pen

marker

bold marker (for parts)

shading

slight color

Definitions 

Copy - in advertising, web marketing, this is the text written by copywriters to entice consumers to your products (wiki).  It is the supporting material for your product and covers all parts of the product from the packaging, instructional material (physical media or online).  It does not include logos, trademarks.

Self-Homework (for future downtime):

Draw a user flow of my day.