Avoiding slow design

Keywords: speed, efficiency, effectiveness

Let’s be honest – it happens to some of us more than others: as a designer you’ve been asked to complete a design by some deadline which seems impossible to you. This could apply to any work, whether it’s developing a concept, creating a designs, a well-written spec or a good presentation.

What can slow designers down and what can you do to speed things up?

- Don’t be a perfectionist

Rest assured that there´s no perfect answer.  http://52weeksofux.com/post/694599232/theres-no-right-answer

- Don’t get stuck in detail
You must Know the constraints. Work on what you can or know first.

- Find the detail balance
Don´t worry too much about the detail. It doesn´t have to be perfect. Get all the elements on the page in rough form, starting with high-level ´boxes´. When you´ve added enough detail and the deadline is nearing, start rearranging things. Then align things so they look good enough to the eye. Finally give everything some breathing space, leave some white space but don´t waste too much time on getting things pixel perfect. Eventhough your IA is only communicating something functional, giving it some visual structure and aestetic appeal helps convince the audience that the proposed design or concept is easy to use.

- Focus on the end-result, work on the essential 

Which pages really need be fleshed out? Spending more time on making the front page look and work  great may be better than having many dismal pages.

- Don’t get stuck in problems

While working on your design you may find an edge case that you feel will need more attention, sooner or later. Don’t give it your full attention just yet. Chances are, if it’s a conceptual presentation you are giving, it can be solved during detail design. Some problems solve themselves while working on other parts (relates to: deelproblemen). On the other hand, you might feel it’s a real biggy. If it’s a core functionality that sticks out like a sore thumb, you might need to ‘go back to the drawing board’ and explore a different interaction approach.

- Distractions and concentration
Isolate yourself from distractions. Hide in another room. Put on headphones (I prefer instrumental or classical music that doesn´t contain words). Increase your concentration (get enough sleep, exercise and eat healthily). Creative a serene working environment.

- Be honest
Be concious about when you are distracting yourself. Work towards your goal, and be cautious of diversions. For example, don´t delay because you like working out ´this little puzzle here´or like to get ´this little thing here´perfect because you personally prefer working on them.

- Rapid design
Don´t reinvent the wheel. There´s many sites or products out there which have done this before or something similar. Perhaps you could borrow their design and wireframe it.
Start with sketching. Don´t waste time with the tools (Axure, Photoshop, etc) until your certain about your design.

- Get help

Split the work, unless the briefing/training and communication required will take more time than actually doing it yourself. Where is the efficiency cut-off? And if you delegate, what quality and effort can you expect from the other(s)?

- Work overhours
Coffee anyone? You will still need some breaks to get your creative juices flowing and zoom out into the higher detail. Sleep is also important as it lets your subconcious work for you!

- Finally, say ´no´ more often – but nicely.
When the boss asks you to make the impossible happen, you have to manage his expectations on time. What does he need it for? Who is the audience? For example, will the design be thrown in as just one of many slides in his conceptual presentation, then don´t try to get it perfect. Chances are you don´t have to bog down into the detail, but just communicate the general idea. Get the objectives straight. If it still seems impossible, say so. Make it clear that with the time given, it won´t be a finished design but good enough to communicate the general functionality. Say what you will be able to do with with the given time. Here are some other tips to just say no under time pressure and other priorities. If time and budget are fixed, there is usually a trade-off between quality and quantity

Other thoughts:

• Avoid interuptions. E-mails, phone calls, etc are unwelcome distractions. Don’t reply to them immediate
• Finish what you started (when interupted). If somebody invades your space demanding your attention, show you are deep into finishing a sentence.
• Work in burst. Work 45min shifts, take 10min breaks. Breaks help you see things from a distance, in perspective, from high-level.
• Work intensively, twice a day. Research shows better violinists don’t necessary work harder or longer. In fact, they have two periods in the day where they are on full, intense concentration  (morning and sometime in the afternoon?). The rest of the day, they take it more easy. This way they get better at what they’re good at. Of course, if it’s not practice you are after but finishing something that requires relatively few brain-power, you might want to make an exception (?)
• Stop early. Research shows more practice does not always make perfect. Quiting early, enough sleep is what differentiates good from expert musicians.
• Be end-result driven. It’s all about goals. Constantly ask yourself why you are doing what you are doing and how does it help you achieve the end-result. If it doesn’t, take a step back and try a different strategy.
• Fix your decisions. Constantly changing your mind about how to approach something, means you are constantly applying this new means over and over. Decide on a system, structure or format first. Work with it for all instances. Else you will find yourself with the next point:
• Always have a finished product. Deadlines are tight. Your work might never be finished or perfect, but at least make it is written and structured in such a way that  you can hand it over for somebody to read or work on at any time.
• Do one thing at a time. Research shows multi-tasking
• Mind like water. Have a GTD system for clearing your mind. If you interupt yourself  with things not related to the task at hand (“I still have to do ….” or “I must remember to…”) or another project  (“I could use this solution for project x”). All this is held in your mental working RAM, waiting for action. Write it down somewhere where you know you will look at it  (@inbox). Getting this like that off your mind will clear it  and improve your creative potential.

Tool tips:

•  Content first, Style after. Whether you’re working in Powerpoint or Axure, add the content first. Styling, structure, alignment, font sizes, colours – all these things are better left until later. The reason is that more than often you want to add or change something, but you only realise later. Then you have to re-apply and adjust all the style again. Another reason is that the appropriate style or format sometimes only becomes apparent later.
• Be creative away from the computer first. Whether you’re considering a good structure/format for a presentation, mindmapping/brainstorming, or have some wireframing to do: always first start on paper, post-its (for ppt)  or whiteboard, or even draw in sand. Creative sparks often happen elsewhere, not behind the computer.
• Be systematic, work in a structured manner. This won’t bother your creativity.

Further reading
Making design decisions

Steps of interaction design and UX

* denotes required steps. Other step are often skipped or optional.

Definition

Define the website goals and project scope. It is not always the ID-ers job to come up with requirements, but they are often refined when gathering inspiration [link to private post] and during design.

• Define the vision
• Define the challenges/problems
• SWOT analysis

Define the target audience

• persona’s
• contextual scenario’s

Business and user goals

• interview and observe users
• talk to product managers and marketing department
• study competitors

Technological constraints

• available programmers and their proficiency (skills and knowledge)
• compatibility  (screen resolution, bandwidth)
• supported functions (existing reusable components
• innovation constraints (culture)

Application/website constraints (re-usable templates, fixed navigation elements) – these become your design constraints. Start with agreeing on the page templates (columns), high-level that you will base your designs on.

Also consider deadline, time-to-market (feature cost-benefit).

1. High-level overview (structure and flow)

List the high-level view, graphically or textually. With the birds-eye view, prioritise each element so you know which one needs most emphasis. Use the

Tools for brainstorming and sketching

Tools: Pen and paper, back of a napkin , whiteboards, brown paper, mindmapping tools, comics and storyboards, different visual views (Adaptive path),

Tools for structuring

Sitemaps and diagrams,  Flowcharts,  notepad/Excel ,mindmaps, rough sketch (blocks)

2. Coarse design

After agreeing on the high-level principles with your client, it’s time to dive into more detail.

Work by iterative design

Get inspiration, note/collect good examples and research best practice, high-level blocks, design, get feedback, design, ask bypassers, design, get feedback.

Wireframing and prototyping
Tools: prototyping tools are (from easy to use to more expert knowledge required): Balsamiq, Omnigraffle, Visio, Axure, Fireworks, DHTML, Flash, Visual Studio
Wireframing                   Interactive prototypes
Tool

Axure                   Y                                                   Y

Links to other pages with overview of ID tools.

Testing

The earlier the better. Paper prototyping or clickable prototypes.

3. Detail design

Support the visual designer and overview usability. When to do graphical design? Agile vs waterfall.

Specification

Tools: Excel, Word
Methods: Use cases
Also known as:

Define all use cases and defaults. Be sure, in later stages, to include edge-cases (randgevallen).

4. QA and functional testing

Though not always an interaction designer’s job, testing the builds and implementations for bugs, functional malfunctions and interaction design.

Remember

• Iterate

More

http://www.linkedin.com/groupAnswers?viewQuestionAndAnswers=&discussionID=54304640&gid=3754&trk=EML_anet_di_pst_ttle

http://uxbasis.hellogroup.com/ (start at Structure)

See also my posts about basic, laws and principles of effective interaction design for the web.

http://www.slideshare.net/pboersma/influences-on-ux-amsterdam-ux-cocktail-hour  Process, method toolbox and internal influences/roles

Methods and toolkit, toolbox:
http://project.cmd.hro.nl/cmi/hci/toolkit/

http://project.cmd.hro.nl/cmi/hci/toolkit/index2.php   (extended)

http://www.allaboutux.org/all-methods  (UX evaluation methods)

Keyword: UCD process, user-centered design process, workflow, design work-flow, agency work flow

Giving constructive design feedback and critique

Social skills. There are times when you have to tell a website owner or another designer what’s bad about their design or site. In face-to-face discussions the way you communicate for optimal effect is crucial.

The importance of critique

Read http://52weeksofux.com/post/743059883/critique-me-please

How to give critique

• Respect the design owner. Start with some positive feedback.
• Just ask yourself these questions during your critique: What did I enjoy about this design and why? What concerns me about this design and why? What does this design remind me of and why?
• Talk about the bigger picture/rationale. Instead of saying, “While I think those flyout menus are slick, I recommend you nuke them and put the links in the center of the page,” the critic might ask, “What alternatives did you consider for the flyout menus?”. While, in any project, practical constraints often win out, discussing the higher level concepts help the design owner (and other team members) make better decisions going forward.
• “Have you considered…” is a great way to start an important criticism, since it gives the design owner a chance to say, “I did, but I chose this direction because…” Now, the team can talk about the bigger issues behind the rationale instead of nit-picking the design details.

“This is undesired behaviour.” or “not recommended’

“This harms or does not benefit findability.”

Other possible topics for this post: how to gather and structure critique.

Inspirational sources:

http://webdesign.about.com/od/authoring/a/aa100699.htm

http://10steps.sg/articles/ways-to-handle-design-criticism/ (Dealing with criticism)

http://www.zurb.com/article/369/how-to-solicit-useful-feedback (ID and Strategy)
and http://www.zurb.com/article/357/the-art-of-giving-good-feedback

http://www.smileycat.com/miaow/archives/000990.php

http://www.intute.ac.uk/cgi-bin/browse.pl?id=artifact772

http://eprints.qut.edu.au/1830/1/Teaching_Indust_design_Criticism_Seongnam.pdf

 

Visual design review tool
http://www.spurapp.com/   Intersections are focus points for the eye. Others: contrast, blur, 50%, mirror, contrast, grayscale.

 

Similar posts (still to read & evaluate
http://www.smashingmagazine.com/2010/03/02/web-design-criticism-a-how-to/

http://ezine.creativegroup.com/portal/site/cg-ezine/menuitem.53fc77b22e6b5c75df7326104308dfa0/?vgnextoid=1b024680cfb6b110VgnVCM1000003580fd0aRCRD

Making design decisions

Decisions. They happen to all of us. Design is usually considered a creative process based on analysis alternatives and previous decisions. In a way it´s like playing chess. What is good, effective design be based on? How can we come to the ideal design solution of a product or design problem?

When you bump into a question, when you don’t know which widget to use, what works best for the user/business, or need buy-in. This post can help. We’ll refer to questions, issues as design problems.

There are always times were you are challenged with a problem. You could spend a lot of time on all sorts of problems. Macro problems are those of design strategy. Micro problems are those of tactics. All solutions to micro problems should not detract from the overall strategy.

First asses the problem

Every time you have to make a design decision you could:

-Consider the importance

• how critical is this feature, or the design thereof, to the overall user experience or business goal/KPI?
• will the product fail to meet the goals if I don’t fix this design issue correctly?
• how much relative attention does this particular issue deserve?
• how does this issue fit in the larger context of design strategy for this product?

-Consider the urgency

• how much time can I spend on this puzzle?
• by when do I need a final answer on this issue?
• remember that some problems solve themselves: the solution could come to you in your sleep, while solving other problems, or while jogging or relaxing, under the shower…

- Consider the generic applicability

• if I get the ultimate answer for this issue, could I re-use that solution knowledge confidently?

-Consider the budget

• could user testing answer this question for me? could I do quick, low-budget usability testing?
• is there time for creating persona’s, even roughly?
• can I perform full quantitive/qualitive research myself?

-Bottom line

• ROI: is me spending time answering this issue worth the investment in time? (“The Utility theory says that each decision has associated costs and benefits to be outweighed.”)

Gut feeling

Good designers make good guesses – they have a good hunch. They make an educated guess.

This is the fastest method for coming with a solution. It must be your first stop: in your first iteration, and the first few iterations following it, you almost only rely on this method for all design decisions.

• Use logic, cognitive walkthrough [..], intuition and common sense, you will be able to make good design decisions.
• Use conventions and think ‘where have I seen this feature before’; if you can’t think of anything, try to break the creative block by thinking outside of your field (in the physical, mechanical world) apply parallel thinking to think of analogies/metaphors. If that doesn’t help, look at the section below called ‘Get examples’

The bad news

Almost everything is questionable and doubtable.  No matter how much of an expert you are, your gut feelings remain objective opinion, unless properly backed up by:

•  a more formal body (expert opinion)
• group of semi-experts (subjective opinion)
• tested resource (research)

For some high-detail (low-level) design issues, you might want to refer to those.

What you do when you make a decision is satisficing: “making the best decision we can given what we can know at any given moment”.

“The Descriptive Theory says that we justify our decisions in order to avoid regret” (DanSaffer)

The good news

As you gain professional experience, your intuition, or gut feeling, your ability to make good decisions in a Blink [..] with good accuracy will increase. You must trust your instinct of making good assumptions (80-20 rule and Blink). If you fail at this, you will not be speeding up the overall design.

The problem is not well understood until after formulation of a solution. Remind yourself, therefore, that a bad decision is better than no decision at all. We have to make “good enough” decisions all the time (see 80-20 rule) and every decision is a compromise. So make those gut decisions in your first iterations, and for your first visualisations (sketches/prototypes), and in times of increasing pressure (deadlines). In the worst case, if your gut fails you, learn from your mistakes  – it will be a learning experience for you and your gut!

Finally, rest assured that there is no right answer! (see http://52weeksofux.com/post/694599232/theres-no-right-answer )

How to improve your gut feeling

• Age?
• Design experience
• Isolate yourself from distractions. Turn on headphones (classical music?) or lock yourself in a room?
• Set up feedback-cycles for yourself (Blink)
• Meditation (awareness, bring decisions into conciousness through visualisation (or words?), relaxation, incubation, concentration, focus, improve your memory)
• Chinese proverb: learn and you will remember, but teach/blog and you will understand!  (or something like that)
• Actively surf  (look at the world through your usability glasses every day with anything that you do or use)
• Remind yourself conciously about your previous experiences
• - blog what you have done,
• - log a screenshot of every iteration and before you start working on the next iteration, note what didn´t work in the last and what you have changed in the next (rationale, before and after comparison)
• - find a way to structurally/systematically capture your design experiences
• Jog!  (see scrum wiki)
• …

Of equally importance: get creative & innovative!

Get examples

Conventions

Competitor audits, case studies, patterns, best practice and other trusted sources.

Competitor sites, books, design patterns, existing software.

Though you don’t have to re-invent the wheel, you don’t want to copy bad behaviour either. Be vigilant of blindly applying convention, take advice with a grain of salt. Be critical but trust the instinct of others.

Research it

Or rather: find research about it.

“Research is a tool, not a methodology. Research is more about filling in the gaps in the designer’s knowledge than an activity to be done for its own sake.”

Proven best practice, proven results (clear before/after changes)

• Do users have behaviours, motivations, expectations that make this decision a bad choice?
• Is it culturally appropriate? For example Yahoo! China

Every design issue can raise questions: is this the best design? Every design is different, just like every designer will come with his own solution. At times, research resources (used with vigilance, see research validity checklist) may come in handy and give that extra convincing power (“One research study shows that…”) or buy-in.

The bad news

Even with user research, we might still be guessing here.

Discuss it

Find it on a usability/web design forum. Ask people what they think of it. I like the discussion forums on IXDA.org

A collective (subjective) gut feeling is better than an objective one.

The bad news

Time: It takes time to find your post.
Cost: Most forums are free
Overall rating:

Google it

Chances are somebody has crossed the same question you are having. The great thing about doing a Google search is that it will be a combination of what you´re looking for, while inspiring you with closely related.

How to improve your searching skills

• Master Google (book), know the Google tricks (Google search engine page, search wiki blog 4 it)
• Exploit the power of other search engines.

Test it

(usability testing or A/B testing, etc.)

Overall neccesities

• A focussed/clear mind, be it sane or insane. Unconcious competence.
• A fast and stable PC and broadband internet connection

Feature requests

Managing feature requests.

I have been slowly giving up on sending websites or software companies with feature requests to improve their product or service.

Reasons:
- they probably drowned in such requests, or don’t have proper processes in place to file and deal with them.
- if I ever send a feature request, I prefer to send it by e-mail rather than at it to a long list in a forum. That way they end up in the mailbox of somebody who cares, rather than a long forum thread that is hardly ever read.
- the company picks what they want to implement based on high-level strategy and features that give the highest ROI. On this front, existing customers come after new customers. In other words, implementing new features is higher on their priority list than improving current ones. That is, until reputation gets hit due to the amount bugs and complaints…

Implications for design

A good interaction designer listens to user needs as well as business needs, and balances these in the design he created and features that design has. Listen to your customers, ask them (…) , gather feedback from customer-service representatives, search on forums what users (of similar products) are complaining about. What is on their wishlists?

Tools

You should consider using a voting mechanism such as:
http://uservoice.com/features?referer_type=ad

Laterthis.com is using it, and it seems to work well.

I’m curious to know: how does your company deal with feature requests?

Web interaction design with contraints

Constraints aren’t evil. Placing restrictions on what is ´allowed´ will save you time and help achieve your goals faster. Often dictated by the client, they are the restrictions narrowing the scope of the design space. Constraints are welcome in the design process.  They narrow the decision space so you don´t have to worry about every detail.

Take the analogy of looking for a holiday hotel. If you know that you want to go to Europe in the summer at certain dates and within a certain budget, you enter these as filters or options on the hotel booking website. By narrowing down, the selection of hotel options becomes smaller until you have found what you´re looking for. If you make decisions, it is easy to find a solution. Even if you have made the wrong decision, you will know in the end what doesn´t work for you. So making decisions and setting constraints helps.

Constraints are useful when there are too many design possibilities to chose from. In the creative process, the designer narrows the possible designs with knowledge of what is fixed, what works and what won´t work. By making up constraints a process of elimination takes place. Effectively you are limiting the amount of possible design solutions and speeding up working towards a final design. Constraints can mean less time to spend on a design and are considered highly desirable. Set constraints too soon, however, and you might come at a dead end.

If you still don´t understand what contraints are, take this example. You have been given the task of redesigning a webpage with an embedded video player in it. The designer was told to redesign the page (and the elements on it) so that it is more usable. Knowing that only the video player must change, and changing other things on the page is not feasible, this is useful. The designer then knows what to concentrate on, what not to change.  …

Sources of constraints

Constraints at first come from external sources. The source might be a manager’s ‘blue sky’ vision or a client demands perhaps. Constraints are sometimes hard like facts, or flexible like wishes. Constraints are not always set in stone, if it gives you too much trouble you can challenge the one who made it up.

For web interaction designers, the constraints may be:

• Requirements specification
• Product definition document
• the design dimensions (resolution, page space for an element)
• accessibility
• technology/technical constraints (dictated by technical feasibility, format or available technical resources and employee skills)
• SEO related constraints – is it relatively more important to have a flashy player/browser than it is to have a
• applications of use  -  what will it be used for? …
• audience – who will it be used for? what are their skills? …
• Other: Browser/platform compatibility, performance, w3c code validation (javascript), text size
• Resolution: the order button (or other call-to-action) must be above the fold.

It is often the designer’s task to find out what the constraints are by asking the right questions (to the right people). Finding constraints equals narrowing scope. Make it clear what consequences a constraint has ‘by dicating this requirement, you will get this, and not this’.

When there is a lack of constraints, or a vagueness about them, the designer’s task is made more difficult. It leads to dillemas and unknowns. At the other extreme of constraints is flexibility, a characteristic which describes the generic form of something. If there is a lack of constraints, you have to be creative.

It is easy to get stuck in constraints and detail. What you should then aim for is flexibility. Present a proof of concept, present the ideal design for one particular situation. In other words, make your own (realistic) assumptions of what would work. If you get stuck in constraints and details, ask the client for clarity. Start high-level, begin with what you know (collect all the facts that are fixed, static) and spiral down into detail.

Mind Mapping and other brainstorming techniques

Mindmapping is useful for:

• structuring thoughts and ideas
• collaborative brainstorming (online and real-time)
• creating moodboards, sitemaps, …
• taking notes on relationships
• cleaner (more legible) and more maintainable, and shareable as opposed to traditional whiteboard scribbles
• major projects that are split up
  • collaborative site mapping

http://usableworld.terapad.com/index.cfm?fa=contentNews.newsDetails&newsID=41870&from=list

 

Other techniques

Visual diagram (Adaptive Path)

Associations and thesaurus - http://www.clovisdesign.com/IDS/affinitydiagram.htm