The Balsamiq UX Blog

Mockup Tips: Datagrids and Specifying Interaction

by mike. July 15th, 2010 under components, tips — 5 Comments

We often get questions about how to do complex things in Mockups. I think the best bet is try to design with minimalism in mind. That goes equally for simplying your wireframes as well as your interface.

Datagrids

One of things we get asked about a lot is formatting tables, aka datagrids. For the most part, formatting tips for columns can be found in our documentation. But you may or may not know that text inside the datagrids may be styled using our wiki-style text formatting syntax.

Here’s an example I re-created based on a customer question we got recently for designing a table with formatted text, icons, and links inside the table.

[The image above was based on a mockup made provided by w3pllc.com.]

It’s not entirely simple to do complex tables like this, but if you need to, you can. You just have to use some of our formatting and text syntax to make things fit well.

Demonstrating Interaction

Mockups is made for wireframing, not prototyping. But people need to describe and specify interaction and behaviors. Typically in a wireframe you do this in one of several ways:

Techniques for demonstrating interaction (complex to simple):

1. Create click through wireframes showing the state change in subsequent compies of the wireframe, i.e. create multiple duplicate mockups use links to demonstrate changes
2. Use a storyboard to show the change in state for the relevant element, e.g. changes to a component in a page.
3. Use callouts and show the state change in the wireframe–useful for single state changes, but you still have to describe subsequent effects of actions.

A lot of the storyboarding techniques we use in wireframing are borrowed from film and animation, where artists dealing with time have found ways to markup and show keyframes. The screenshot above shows the last technique, a simplified version way of showing state changes that I tend to do.

Communicate efficiently

As an in-house interaction designer I’ve tended to use as few words and pictures as possible to describe behaviors if I know that I can communicate the idea, or can reference a design pattern that I know my team is familiar with because I may have described in greater detail elsewhere.

The object for me in doing wireframes is to get far enough in specifying the interface until the idea is understood and agreed upon, iterated on, or scrapped. If you can’t do that with the simpler techqnique and you need to describe behavior more completely, then you move up in the order of complexity to specifying more. But I think the ideal is that you capture and communicate the idea as simply as possible and then build something.

This is just one way of looking at the difference between wireframing and prototyping. We fit in a place that satisfies the needs of the designer/developer looking for the simpler end of the spectrum. Hopefully this describes one way of doing that.

Download the Mockup used in this example.

— 5 Comments

 

 

 

myBalsamiq Beta Gets an Overhaul

by mike. June 18th, 2010 under mybalsamiq — 2 Comments

It’s been quiet around the UX blog for the past month. We’ve been heads down working on a beta refresh, making big usability improvements to the way you work with projects in myBalsamiq, and we’ve just released the latest iteration for our beta testers.

Watch Peldi’s screencast below to take a look at what we’ve been up to.

Here’s the full list of improvements and feature addtions you’ll find.

1. Simplified navigation views

We’ve transitioned from using Flex for the project, mockup, and asset views to using HTML. This means that those views will be rendered more quickly and should provide a familiar experience.

2. Home Page

The home page will show you a set of projects, visualized as sketchbooks on a desktop.

You can create or upload new projects and set a different style image to differentiate between them. The style of the home page background colors and texture can also be changed.

3. Project Page

The Project page shows your project mockups. When we moved to the simpler views on list pages, we also addressed some of the usability issues of controls. Some actions for objects in our project/mockup/asset browsers were far away from the objects. Now all actions are next to the object. View/Open is the default link, and there is an action menu to the right of the project title to access other options from those views, e.g. delete, edit, etc.

The order of your mockups is now important, because we’re introducing the story view. We’ve made ordering mockups simple using drag and drop. When you hover over a mockup in your project page, you’ll see a gray grip bar appear above the mockup and the cursor becomes a move icon. Drag and drop to re-order. We’ve also provided direct manipulation cues in the thumbnail navigation on mockup pages.

4. Grid/Story/Map View

On your project page, you’ll notice 3 icons in the right below the New Mockup button. These let you change the view of the project mockups between grid, story, and map. And when you’ve selected one of these views we’ll remember and show you that view when you return until you select another one.

Grid is the thumbnail gallery view of your mockups, arranged in rows and columns. This will be your most common view.

The new story view allows you to see all mockups at 100% width in a single page with descriptions. This is useful when presenting your project to team members or possibly when printing. The linear order makes it easy to describe flow while scrolling through the entire project.

5. Mockup Page

The Mockup pages have been simplified. We’ve put the mockup center stage, spanning the entire page width. That was a small, but necessary change to help give our mockups focus and to fit wider mockup designs.

We now provide a new set of controls for navigation to previous/next mockup, displaying a list of all thumbnails in the current project, and opening the project in prototype view. In the small area below the Edit and New Mockup buttons, there are small icons for these actions.

Prototype View: The arrow icon that points up and right opens a new window using the current mockup only–it removes the rest of the application interface.

Previous/Next Navigation: The left and right arrows allow you to navigate to the mockups before and after the one you’re currently looking at. Hover over the arrows and you’ll see a tooltip with the name of the mockup.

Thumbnail Navigation: The icon on the right will show a thumbnail navigator on the right of your mockup. This allows you to view the entire deck of mockups in the project so you can jump to a different one. You’ll notice that the action menu arrows on the right of the mockup titles give you access to all the advanced options, and hovering over a thumbnail also displays the grip control so you can drag and drop to reorder right in this thumbnail strip. This is a big improvement over our previous heads up display.

6. New Prototype View

The Prototype view opens the mockup in a new page by itself without the surrounding myBalsamiq interface. If you have links in your mockups, you can now use your project as a click-through prototype for demonstrations and usability testing. It’s super simple, but this feature will make your Mockups useful for more of the design and testing process.

7. New Project Team Menu

You’ll still be able to contact your whole team or individual people via Skype chat, call, and email, as well as view your entire team map.

We’ve moved the controls for doing that to the upper right of the page in a header menu that’s available everywhere on your site. We think it’s a lot simpler now and it’s nice to have it in one position, tucked away in the header.

8. New Access Control Menu

Setting access control is a lot easier to find and use. In the header menu on the upper right, you’ll see a lock icon labeled Access. When you open the access menu, you’ll see a slider that let’s you set your access level.

9. New Account Settings

We’ve separated user settings (configurable options for you and your team) and the site account settings (admininstrator configurable options for the site).

Among the account settings changes we’ve added are a set of pre-set themes to modify the design of your site, and color selectors to customize to your specific brand requirements.

The staff page combines the map of your project team so you can easily view people by availability, and the staff grid below provides an interface to manage your team with the same action menu on the right, which should now be familiar to you from the controls we described above.

That’s all for now. We still have a log of bug fixing and improvements to implement. This is a major iteration, and releases with fixes should be more frequent from now on.

Current beta users can head to their myBalsamiq site. If you want to get notified when we open up the beta to more users, add your name to our invitation list.

— 2 Comments

 

 

 

Next steps for myBalsamiq

by mike. March 31st, 2010 under mybalsamiq, usability — 3 Comments

Over the past month, I’ve been working in myBalsamiq daily, and have been reviewing and answering issues in our GetSatisfaction forum. Each day I went over every detail trying to understand how everything works, and looking for issues that need improving.

A few weeks after I started here, Peldi went to SXSW. When he came back, we talked about what needed to be done here. We both believe that at its core we have the functionality to make it usable, but what’s missing is that it’s not as simple as it could be, and it’s not as fun. We’ve spent a couple weeks looking at myBalsamiq with fresh eyes and have a corrected vision for the app.

The new concepts reflect an experience focussed on evolving the work space to be more efficient and fun to use, and making the mockup pages more functionally centered on the mockup. We also wanted to make IA and usability improvements that help you move from place to place easily, and hope that the surrounding interface reflects the hierarchy of menus more clearly. Read on to learn about the new concept, or go directly to our myBalsamiq project for the mockups.

The Story

The experience at the onset is like browsing a library of sketchbooks–projects you and your team are working on. You select a project sketchbook to dive in.

Home: All Projects

The browsers here are simplified and let you color code the project books. All of the browsers, with the exception of the map will now be rendered in HTML now. We love the direction this is taking and think it will feel simpler on the surface.

A Single Project

Once you’re in a project, browsing pages is much like seeing all the pages of the book. We allow custom ordering using drag/drop direct manipulation. We’re making the menus and behaviors more web-like, and advanced features are now adjacent to the object associated with it, e.g. action menus for mockups wherever they appear in the different views.

A Single Project in Story View

You can view your mockups in Story View shown above, which allows you to view all of a project’s mockups at full width on one screen, with descriptions. This will let you present screens in one view in linear fashion–much like telling a story using your mockups.

Mockup

Once you dive into a mockup, you see that the mockup now fills the screen. We have added controls in a “project menu”–the strip below the global nav containing the breadcrumbs, assets, privacy controls, and a project paging section. This carries over the metaphor of flipping through the project notebook. Prev/Next buttons flip you through the custom order you created. Clicking the book icon slides in a thumbnail strip so you can jump to different pages. It can be toggled off with another click. This strip is consistent with the mockup browser shown in our editor.

If you scroll down, you’ll see that we have moved elements around to reduce the visual noise of the interface and make the mockup prominent. We’ve also been exploring how to handle proposals based on the mockup in view, as well as super simple workflow to approve and merge changes being proposed. We’re really excited about that.

Test Drive

We’ve opened the project up for you to take a look at where we’re going. Inside you’ll see wireframes for the views we’re iterating on.

View myBalsamiq Iteration 1

We want your feedback. Let us know what you think about our corrected vision here by commenting.

Hang in There

Thanks again all of you, for your patience. I know it’s been a long time waiting for the next stage. To the beta users, these changes will feel like noticeable adjustments on the surface, but all of the core functionality will still be there.

As I said before, I am using myBalsamiq every day, so I enjoy the stuff you do, and feel the pain you feel. If we can’t make it a place I want to be every day, then I may as well go home. Help us make it awesome–a place you want to work in every day.

— 3 Comments

 

 

 

More About Doing Remote Unmoderated Usability Testing

by mike. March 10th, 2010 under usability — No Comment

If you read my entry about the quick test of the software update flow that we did last week, I thought it might also be of interest to review the tool I used. I used a new usability testing app called OpenHallway that lets you create and conduct test sessions remotely. Once you’ve recruited participants, you invite them to view a URL which then runs a Java app to record the participants screen and voice.

You can read the full review of Open Hallway at Konigi.

— No Comment

 

 

 

Install and Update Usability

by mike. March 4th, 2010 under balsamiq.com, process, usability — 11 Comments

One of the nice things about working in a small, flat organization is that you have to do support. With no levels of hierarchy and everyone monitoring support, communication is easy and fixes are fast. My experience today in trying to short circuit what appeared to be a small issue that is causing some pain to customers is a good example of how small can mean nimble and responsive.

The past few days of my first week I’ve been monitoring support and answering a few Get Satisfaction questions where I could. That’s a part of everyone’s job here. But it also helped with one of my primary goals this week, which was to get get a handle on the priorities and begin working on a few of these small projects. I’ve been getting up to speed on the apps, filing bugs, and looking at the UX priorities. I’ve also been thinking about how to attack the low hanging fruit. What I saw while doing some of this work in parallel, is that I might be able to do some triage and kill a few birds with one stone here and there.

The Upgrade Problem

I saw a few posts about issues people have with upgrading, knowing I had the same discomfort with the upgrade process myself. But I got back to work, and filed the issue in the back of my mind. I’ve also been doing a content inventory of the small Balsamiq.com site, and trying to get a handle on the IA there. I was looking at the really long and verbose pages we have, and in the process was going through scenarios like finding the upgrade link. I knew it would be hard for some people to figure out. It was too much work.

Then I came to the AIR upgrade badge and wondered how much of an issue that was. If you can think back to the first time you installed an AIR app, you might recall how seemingly quick the process was, when compared to downloading a package and executing it on your machine (running setup.exe on Windows or dragging a .app from a disk image on Mac). It’s almost scary how seamless AIR installs are after that. Almost.

The issue for some with AIR installations, especially upgrades, is that they introduce different way of upgrading than what we’re familiar with. You won’t know what it feels like until you do it once. Hell, it can feel unfamiliar for a few times until it you’ve done it enough that it feels natural. I thought the only way to really know if this was pissing people off was to test it.

Doing Ninja-Usability Testing

There are various gradations of usability testing, but the ones I’m interested in are those that are cost effective while being easy enough for me to do quickly and remotely. Discount usability testing is about low cost methods for testing using only a handful of people that run through scenarios. The outcome is often that the most obvious problems are uncovered with the least investment in time and resources. Jakob Nielsen originated this idea. A radical version of this is the 5 second test, which I became aware of after reading an article describing the process at UIE.

For my needs, I wanted to just figure out this one problem. What do people experience when they try to upgrade Mockups for the Desktop? So I turned to remote usability testing tools. OpenHallway is one I’ve been testing out–they’re a sponsor of Konigi and I’m writing a more in-depth of review of the service soon. What I wanted to do was to give people this simple scenario.

You’ve been using Balsamiq Mockups, and you want to upgrade to the latest version. Can you find the upgrade installer in the site?

Get to the point where you think you’ve found it and tell us where you think it is. Tell us what you would do at that point to upgrade.

So I put a call out on Twitter and stopped at 6 respondents. I wanted to test 1 problem with a few people. I don’t know much about ninjas, but that seems pretty ninja-like to me.

The Feedback

This the feedback I got. My notes are quick and dirty. There are no task markers because there’s only one task. There’s no quantitative data to analyze. Just observation and common sense.

Tester 1
Wrote: You click on the “Install now” button

Notes: Started by scrolling through home page. Cliked Support > FAQ. Succeeded after searching the FAQ. Succeded in under 1 minute.

Tester 2
Wrote: After navigating through several pages, I found out that to upgrade the software, you simply download the latest copy off of the site.

Notes: Used the Support link after skimming the home page. Scrolled through the Support page and didn’t find it and returned to Home/Products link. Clicked Desktop link in hero. Then appeared to read the page until scrolling down to Upgrade instructions. Found it, didn’t sound confident at first. about 1’30″ to complete task.

Tester 3
Wrote: Final thoughts:
1/ difficult to find download area
2/ difficult to see if by downloading the latest version it will be installed without deleting anything
3/ looks a bit like apple website without the blingbling effects

Notes: Skimmed the home page. Clicked the Products page, found home/products confusing. Went to desktop mockups product page. Then support. After filing with browsing, saying “not very useful stuff,” went to search for “download” and tried the Examples page. Found the Desktop link and guessed that it was an install process.

Tester 4
Wrote: it wasn’t there or at least i couldn’t find it i was looking for upgrade or something similar

Notes: Failed or gave up task.

Tester 5
Notes: Scanned the home page for an upgrade link. Clicked Desktop product link and found the Upgrade heading below the fold. Then wondered “Would download the demo is the same as just downloading? I certainly don’t want to buy it again.” Successfully started the download, but wondered if she was doing the right thing.

Tester 6
NOTE: She took the test AFTER I had already made changes by creating a download page and adding the download link to the Header.

Wrote: The first thing I was looking for was a download link. It was on the top right of the first screen in the main navigation. I would have expected that if a new version is recently out that the home page would promote it more obviously though (so I looked in the main area before I looked at the navigation, which is where I expect to find it in a permanent fashion).

On the download page I had to interact with the Flash widget in order to get the download started. That was not expected, I was expecting to see some obvious “Download Version X for Y Platform” button – don’t really understand the benefit of that little widget.

All in all it was straightforward to do it, but things just did not look like how I expected. The site could really use a visual refresh so that core content, navigation and important call to actions (like “Download the latest X”) are visually differentiated.

Thanks!

Notes: She was successful in finding the Install badge quickly, but again the default AIR install badge is not familiar enough.

Taking the Low Hanging Fruit

Did you notice the funny note on the last one? She took the test after I had already made the changes after seeing what needed fixing in the first 5 tests. You could argue that those fixes were common sense anyway, but the audio from the users thinking out loud provided even more feedback about specific things with the AIR badge and what they expected. I didn’t transcribe those notes here. Below is the plan I wrote up.

Immediate Plan
1. Create a download page with very little copy. Be sure to put in right keywords in title for search.
2. Add Download link in header.
3. Add a more prominent Download call to action in support page.
4. Think about interim ways to make call to action clear in home page without a major redesign.

Upcoming Plan
1. Vet the design of the updated download button (AIR badge) we already mocked up.
2. Add a link in Balsamiq or Help menus of desktop that goes to our new download page.

I’ve already done 1 and 2 from the first list. Download is now in the header and links to the new Download page.

Lessons Learned

It’s been a fun first test and it was good to try using a service that’s simple enough for my needs. I started by putting a session together at around 7am. I recruited via Twitter, got 6 respondents and waited while they ran their tests. By 10 I was watching their videos and wrote up notes and a plan for changes. I had lunch, and was making the changes by 1pm. That’s how I want to do things around here.

— 11 Comments

 

 

 

UX Design in the Open

by mike. March 2nd, 2010 under design, process — 1 Comment

Today marks a new chapter in the ongoing evolution of Balsamiq. In the spirit of openness and transparency that you’ve come to know from the crew at Balsamiq, I’m going to be writing the UX blog to talk about how we do user experience design.

What can you expect?

You can expect to read about topics ranging from specific feature design, to discussing our design philosophy. You can also expect to see me asking you about your experience using the products.

I want to know how you’re using Mockups and myBalsamiq. Are we successful at providing an experience that maps to your mental models? Is our purchase, installation or upgrade process not working for you? Maybe part of that discussion is also discovering and introducing each other to new ideas for using Mockups more efficiently or in ways that are unfamiliar, but potentially useful? Any question related to your experience with Balsamiq is fair game.

Sharing our process

I think a big part of this blog will also be about sharing our process with you, being open about how we do design, what we’re researching, and discussing the process of vetting and designing features. We’re committed to sharing as much as we can, and what I intend to do is put my thoughts and most of my research out here so that you can understand how we’re approaching problem solving.

One of the first things I will be working on, for instance, is a new component skin. While some people love our current interface component style, we also hear people asking for elements with slightly cleaner lines that still retain a low fidelity sketch appearance. As I work on this, I’ll post my references here so you’ll see where I think the design of those components should be headed.

Peldi recently started a discussion on the design of shared component feature, which will let you share grouped masters like page headers, or reusable components like forms. We’re essentially asking you as users what you think of the model, and what works and doesn’t work for you before it gets released. That’s designing in the open, and I think we may see more of that happening.

Communicating the path

Lastly, as I dive into the support queue on Get Satisfaction, I’ll try to distill the feature request discussion into a dialogue that relates back to the bigger picture for Balsamiq. It will be helpful for me to get my head around how the product evolves to match the mental models we have for interface design as a varied audience that ranges from developers and ux designers to business analysts.

So that’s the plan and enough talk for now. Time to get started.

— 1 Comment