Michael Gaigg: Über UI/UX Design

22Oct0

10 MyBalsamiq Tips & Tricks

Posted by Michael Gaigg

After having used Balsamiq for some years now I was excited to try MyBalsamiq which is basically Balsamiq on the web which allows for better sharing and collaboration with your team and clients. This blog article intents to share my experiences and gotchas of using MyBalsamiq with you.

Tips & Tricks

Set expectations

Setting the stage is key to a successful use of MyBalsamiq. Explain to your team members and clients that wireframing helps to communicate ideas and the WHY and WHAT we are doing by intentionally stripping out visual fidelity so one doesn't get distracted with the HOW.

Create Versions

I typically create the first version of any design using Balsamiq for desktop. I then upload it to a project folder, dub it v1 (version 1) and share it with the team (and client) so they can start commenting or proposing alternate versions as part of the thread. After reviewing and discussing the proposed changes, missing items, misunderstood elements, etc. I create a revised version which instead of simply adding another comment/alternative I upload once again, this time naming it v2 (version 2).

Again I open it up for a round of comments. I strongly recommend finalizing the design at this point by creating a document that states the purpose of the screen, specifies any requirements and uses the final mockup as the proposed design. Move on! If you for whatever reason you cannot move on, then this might be a strong indicator that you might have a problem in your project structure.

Involve your clients

Yes, I create beautiful designs just to see them being destroyed by ignorant clients. Well, I guess it's the other way around, designers tend to be attached to their intellectual creation more often than they should. Well, chicken or egg, involving your client in the process is always a win-win situation. So do it, don't hesitate having your design dissected, your ideas challenged and your assumptions validated!

Notes are your Friends

Sometimes I start a wireframe with an empty frame and a bunch of sticky notes. I slowly fill the sticky notes with bullet points of requirements or anything I feel belongs into this space. Only later I start designing the actual components that make up the screen.
In the same way I ask my clients to use sticky notes to annotate anything they feel needs to be said about the design, missing items, assumptions that aren't reflected, new ideas, etc. It really helps commenting on concrete items rather than abstract word constructs. Remember, sticky notes are your best friends.

Use Assets

Assets are grouped items with a name that can be used like any other sketch control. Assets can range from custom frames, re-usable templates, industry-specific or device depended controls, etc. Spend some time creating assets and share them either site-wide or on a project by project basis. Have a look at the popular free map controls I've created some time ago to see what I mean.

Holistic vs. Focused

I almost never get into too much detail upfront. That's for multiple reasons:

  • It's really easy getting hung up in details
  • More often than not you will find yourself wasting precious time on something that is still in flux and bound to be thrown away anyway
  • You lose sight of the bigger picture (navigation architecture, overall layout)
  • It becomes harder and harder to make changes without rethinking your concept/layout

This tip becomes a rule when working in an agile environment. You need to design the holistic view upfront, have a solid concept in place that describes how you will integrate the pieces later. Think a lot and validate (e.g. usability testing on your wireframes)!

Start the holistic design as soon as you have a good handle on the available user stories and (ideally) have it done before the first sprint planning meeting - I've heard the term Sprint 0 used a lot.

Encourage the sprint master to create a "Design UI" task which will be added to each epic or even user story that requires user interface design - this is the place to design details.

Outline Workflows

Many times I create a concept sheet or experience workflow diagram directly in wireframes. I use simple sticky notes or window controls and connect them with arrows to show how a user will flow through the application. Very often these boxes later become pages that I need to design which is kinda neat because I can directly link these pages from the workflow diagram. Managers really appreciate this high-level view and are able to comprehend better the overall structure of the site/application. You will see the quality of questions improve as well 😉

Create Prototypes

Your clients and project managers love this feature: launch prototype. We've used it before on the desktop but now we have it available online using a private url. There is also a great article about how to integrate with the leading user testing tools (Usabilla, UserZoom,...).

History

Version history seems to be nice to have but it actually turns out to be indispensable. A designer makes decisions based on observations and changing requirements (and sometimes taste ;)). Being able to compare versions over time proves to be the best line of argumentation when it comes to explaining why we reached this conclusion?. Sometimes it is less the "how we did it" rather than the "how we got there" piece!

Get MyBalsamiq for (almost) free

Full disclosure: I'm not getting a dime for saying this. But here is how you turn your existing desktop licenses into an (almost) free subscription: "...existing Mockups for Desktop customers will be able to apply half of what you paid for Mockups for Desktop towards myBalsamiq credit."

Any invited user to myBalsamiq can use the online version for free basically saving on desktop licenses. While not as slick as desktop, it's a nice treat.

Wishlist

Check-in / Check-out

I'd really love to see a version control system that can be connected to your desktop version. Basic functionality would be:

  • Get latest version(s) from myBalsamiq (and synchronize with desktop)
  • Check-in a newer version from desktop (and propose as new)
  • Show me changes for all files (i.e. compare your desktop version to myBalsamiq)

Right now I find it really difficult to get the latest version from the web, modify on desktop and update existing thread with newer version. Balsamiq team: any plans for such an integration?

High-level (conceptual) view of all screens

Above I've talked about sketching the conceptual workflow. While starting in v2.2 the Balsamiq team added a 'site map' control (very cool btw), this doesn't really fit my need to show the workflow. I guess for now I need to stick to my connected notes 🙁

5Mar0

Wireframing – what a waste of time… not!

Posted by Michael Gaigg

See my notes below the slides...

Slide 1

Wireframing is a planning tool.

Use it whenever you need to turn a concept into design.

As a direct implication: your design is only as good as your strategy/concept. That means: ask the right question!

Slide 2

Demo (no need to describe to you the benefits, just see)

Tips:

  • mockupstogo
  • mybalsamiq
  • don't have templates, but have stencils (symbols)
  • cropping
  • keyboard
  • 960 grid system
  • notes
  • from rough to detail
  • design to scale if possible
  • please no more lorem ipsum

Slide 3

Let me show you some case studies to illustrate how and when wireframing can help. While usually I recommend 2 or max of 3 rounds of mockups, during proposals where requirements are vague it’s more important than ever to kick around ideas and bring the visuals in front of key stakeholders and decision makers. So we might end up with 6 or 7 rounds.

Slide 4

And this is our final mockup that we felt confident fits the target audience of an executive.
You see the basic elements: header, navigation, dashboard, Maps.

Can you guess which technology this is based on?

Slide 5

Reviewer Server asked us to help designing the RS Health Check Dashboard which was used and presented at the User Conference 2011. This effort was designed (including screen comps) within 2 days and implemented within 2 weeks.

Validate your designs!!!

Slide 6

It will save you

  • Energy
  • Time
  • Money

Because the majority of UI changes made before coding begins.

Slide 7

A picture/sketch is so much richer than describing.

Communicate visually.

Different disciplines need to interweave/overlap (designer needs to influence the requirements and a pm needs to influence designs). I prefer a PM coming to me with a sketch of the design saying: "Oh, here's some requirements that I have, and here is sort of high level what I'm thinking about.“

Slide 8

Helps prioritize and add emphasis to the important user stories. Identify gaps/possible wholes and not needed functions.

Nail down scope and functionality.

Avoid building features that turn out to not be needed in the first place. Limit the amount of gotcha’s along the way, “ah, we need to be able to save this damn thing, let’s add another button”.

Slide 9

What I like about lo-fi wireframes is that it's obvious that design is not done, looks unfinished, and nothing is set in stone.

Don’t get hung up on discussions about design details.

Don’t loose focus of the main goal and core tasks!

Picture: Detail '57 Chevy

Slide 10

Unless there is a good reason – proposal work, research, marketing – max. 2 iterations!
‘Finalize’ and move on! There is plenty of room for fine-tuning along the way

Slide 11

A sketch is a sketch (after serving its purpose it’s still only a by-product, like a white-board drawing). Don’t end up spending more time updating all the sketches in all the places in all the documents – that’s not the idea of sketching.

Get sign off!

Slide 12

As simple as it looks (or I make it look) – sketching/prototyping is only as good as the person that does it. It doesn’t replace experience and hard work.

Slide 13

The two links mentioned during the demo: