frontend united: etching wireframes & agile ux

Etching wireframes& Agile UX

@royscholten, 2013

Monday, April 15, 13

Design process

Many sessions have been about with how to build something.

Today, I'd like to talk a bit about what you can do to find out *what* to build in the first place.

Because it doesn't matter how lean and agile your continuous delivery is if you don't start from an understanding of the problem you are trying to solve

How do you get to that understanding?

That's where the design process comes in. Because design is how it works.

User needs

Business goals

Technology

Before we dive into the process part, lets establish the domain we're working in.

The interaction or user experience designer looks for the overlap between

- business goals- user needs- technological constraints

User needs

Business goals

Technology

Only where those three meet there is a chance for a viable product or service

So that’s the playing field established.

Now for the process bit…

P.I.S.A.

I studied illustration at the art academy.One course was called concept development.

It thought a method for generating creative work and drawing it to a conclusion of some sorts.

It was very abstract…

P.I.S.A.ProblemInventorySelectionArbitration

This is what it stood for.

We basically got two weeks to work on each stage.

- find an interesting problem- generate multiple ways to solve it- choose the best option- improve that and ‘ship’ it, make it presentable.

I’d like to show how I apply this pattern to 3 different but related kinds of creative work

Hi, my name is Roy. I’m an artist.

I make prints. Mostly abstract etchings and monoprints

This is the working environment

User needs

Business goals

Technology

This is the domain.

Let’s go over PISA

Problem?Me.

This makes it simple. I’m always around meThis makes it hard. Using your own ideas and perspectives to create something.

InventoryFree experimentation. Generate lots of material

So finding an interesting problem in itself requires that I generate stuff.

It’s mandatory to create a lot of waste here.

Etching is where you etch an image into a zinc or copper plate. This allows for multiple prints from one original

Monoprint comes down to applying ink to anything that will go through the press. Most of the times this material is brittle and so you can only create only one unique image

Inventory! produce a lot of material

SelectionWhat’s looking interesting, surprising, promising?

Review a body of work to discover trends, relations and identify an area to hone in on

- This is why painters walk back and squint- This is what happens when you say "lets take a step back"- Pick a direction and create another inventory of options but this time focussed around the chosen direction

you look at all the stuff together

Isolate some pieces to see if they can live up to being presented as is

For this particular round of work. I selected these two pieces.

Not because the overall images were the strongest

But there was a certain quality in the detail that I wanted to pursue further, get a grip on this particular kind of visual language

ArbitrationReproduce the happy accidents in a more controlled way

So where these were mostly monoprints, the non-reproducible technique.

I wanted to find a way to capture this on zinc, and apply this to the zinc plate

You cover a polished plate in groundRemove and apply it again.

It’s very similar to using layer masks in photoshop.

So, applying this to multiple plates, a body of work is generated that once again has to be reviewed, selected, reordered.

It’s iterative!

And then there comes the moment where it’s time to draw your conclusions and pick the works that you want to show.

So where this was the starting point for this particular series of sprints.

It resulted in these works.

This is the etched wireframe one

It’s really fun and interesting to have this

Drupal UX

Hi, my name is yoroy. I’m a Drupal core contributor, working on a more usable Drupal

User needs

Business goals

Technology

You could say that in core UX, this is where we work on things

Problems?No shortage of Drupal usability problems…

Drupal UX problems?

- Just how serious the issues were became clear in 2008, when two proper usability lab tests were done on Drupal 6.- Dries wrote a blog post about not releasing Drupal 7 before 90% of the most serious issues were fixed.- I helped organize a usability sprint at Drupalcon Szeged and you could say that that's where we bootstrapped Drupal UX team.

So, how do we work within core development to redesign and improve parts of the user interface?

Problem?Content creation UX not good enough.Make it better!

Having a well defined idea of what you'd like to see fixed is key.

Pick your battles. Drupal is huge, don't try to boil the ocean.

Pick a self-contained part of the user interface and get a clear idea of what you want to fix and what not.

A critical audience is all the content creators and editorsThose people that get to use Drupal content creation forms weekly or even daily, long after you’ve delivered the project.

Where this used to be a decision made by IT,These people have a strong influence on which system to use

Simple example. Some serious problems with even a simple version of a content form

- no clear hierarchy to the overall page- essential options are hidden from immediate view- people do not know if ‘Save’ means it will be published or not.

Inventory, IWhat do we have now?What are the others doing?What is contrib doing?

http://groups.drupal.org/node/214898

So we have an interesting problem to crack. Relatively contained problem. Improvements will have a big impact on general perception of Drupal usability.

So, again, we do the inventory1, 2, 3

(switch to firefox)

its important to show your research, you need better foundations for your designs than ‘i like it that way’

Inventory, IISketch!

The best way to get a good idea is to have many ideas

- This is the part where some developers get really nervous! - Sketching is deliberately open-ended, literally sketchy: vague, half-defined.- Post your ideas and allow for feedback

Throw out rough ideas. Create multiple options

We had Skype meetings to review our ideas and point out promising areas, problematic ariesas

SelectionReview & decideContinue in hi-fi (Photoshop!)

It makes sense to timebox things a bit.

There comes a moment where you realize that you won’t be coming up with anything new (for now)

yes photoshop. It’s not an option to dive in and write up the patch that implements this design in a quick and easy way.

Photoshop is still usefull in those cases where you want to get an idea of what the page as a whole comes across

Couple of iterations here as well. Exploring particular details.

(switch to firefox)

ArbitrationTake it to the issue queue for implementation

Wrap up the design phase, time to bring it to the issue queue

- Create a brief, reference all the prior research and art, outline what you want to see built.- Ideally, kick it off with a patch- Developers love patches, it's their source material and gives them something to play around with and brings things into their domain of expertise- It can all still totally go off the rails, core issue queues often define the limits of what core devs see happening on d.o.- Usability test if necessary- From then on, it's mostly monitoring the discussion to maintain momentum, help deciding on additional issues and generally try to keep things on track

(SWITCH TO FIREFOX)

Wunderroot

Hi. My name is Roy Scholten and I’m a user experience architect at Wunderroot Belgium.

I joined Wunderroot because I want to be there where the rubber meets the road.

User needs

Business goals

Technology

So we've established multiple times that we can do better than producing static wireframes, mocking up detailed designs in photoshop and the like.

We need to be more agile! Lean! reduce waste and focus on providing Business value asap.

What can you do to help your clients discover the sweet spot?

Agile UXP. Business & user goalsI. Sketch scenariosS. Review and selectA. Prototype & Usability test

This is the format I’m applying these days to uncover what we need to build in order to best help cleints

Problem?Day 1:Business objectivesUser needs: persona

(recruit test participants)

InventoryDay 2:Sketch screens in the scenarios

SelectionDay 3:Review all ideasGet stakeholder feedback Decide what to prototype

Arbitration, IDay 4:Build the prototype

Justinmind.com

Arbitration, IIDay 5:Usability test

5 participants

roy.scholten@wunderkraut.comRoy Scholten

Contact

frontend united: etching wireframes & agile ux

Design

celebrations.com wireframes

wireframes ii. typical wireframes

seb wireframes

ux wireframes

wireframes graded

guidebook to industrial etching & marking · etching/...

kijkmijnhuis wireframes

using wireframes

wireframes, definiciones

wireframes ii

donator wireframes

wireframes examples

app wireframes

beefriend wireframes

iapple wireframes

thig wireframes

etching etching definitions isotropic etching: same in all

wireframes - usability

kpspin wireframes

sweeteeth wireframes