UX
Don’t simplify the UX, curate!
Within the design profession, terms like "synthesize, reduce, minimize, and simplify" symbolize one of the core tenets to improved usability and interaction design. Taken at face value, simplification is a worthy tenet to embrace, and the UX community holds this idea in high regard because we believe it results in greater functionality and consumption of content for the user.
However, the negative connotation and misapplication of exercises associated with simplification often put UX designers in a defensive position with clients and content writers. As a result of this, I have been trying to position this aspect of the design process within the context of content curation rather than in the context of content elimination. In the end, elimination or synthesis of content is likely inevitable regardless of the exercise, but I think the notion of curating content is a more accurately framed description of our role as user experience designers. I have also found that this approach promotes positive communication while building immeasurable trust and confidence with our clients.
3 Tactics for Improving Wireframe Presentations
"That should have been brought up when we looked at wireframes"
Whenever I hear remarks like this, I usually feel it's not the client's comprehension that's at fault – but how the materials were presented. As UXDs, our job is to communicate and if the message isn't coming across, then that's our problem. And let's face it: most people never come across a wireframe or any of our other arcane documents. There's a learning curve that we need to manage.
Launching right from a cover slide into the grit of wireframes will rarely go as well as expected. As we flip through the screens and point out this and that, clients are trying to provide intelligent feedback while grasping blindly for context.
Below are three visual tactics I've used to help smooth this process and get good feedback. These aren't a replacement for honing your presentation skills, but they can be good accompaniments.
Tactic 1: Tell a Story
Maybe it's me, but it feels unnatural to critique a design outside the context of a user's goal. So, it makes sense to use a storytelling approach to present them.
I like to frame a set of screens in the context of a scenario. These state the motivation for the action, the conditions present, and the desired goal.
Given this scene to turn over in their head, I find people can better evaluate the wireframes since they can role play through the interaction. Typically, less time is spent debating subjective details and more time is spent discussing how well it accomplishes a goal. As a secondary benefit, you can reuse the personas and scenarios you developed earlier, demonstrating how that work influenced this.
Visually, I use a flow diagram that uses screen thumbnails instead of generic boxes. The "small multiples" help tease out the state changes within an interaction. When hyperlinked to the corresponding wireframes, the flow becomes a visual table of contents.
Continue reading "3 Tactics for Improving Wireframe Presentations"
How to Create Prototypes With Omnigraffle
Omnigraffle has become my hammer for creating a variety of things. I use it for wireframes, sitemaps, concept models, charts, reports - pretty much whenever I need to create a document. So, while there are a number of other great prototyping tools like Axure, Protoshare, and plain old HTML, I look to Omnigraffle first when I need a simple, clickable prototype. Here's a quick overview of how to do that.
Adding Actions to Objects is Simple
Just select an object and pull up the Inspect window. Within the Properties section, select the third option, labeled Actions.
By default, all objects are set to "Do Nothing". To make an object do something on click, change this selection to one of three actions; "Opens a URL", "Jumps Elsewhere", or "Shows or Hides Layers". There are two others, but I have not found a use for "Opens a File" yet and "Runs a Script" is too fancy for me. I should also note that "on click" is the only trigger Omnigraffle can handle. If you need to mock up hover actions or data entry, you probably need another tool.
- Opens a URL - Use this to link to external websites. For example, you may wish to link a Tweet button to Twitter.com.
- Jumps Elsewhere - Use this to link to other canvases in your Omnigraffle doc. Personally, I like to keep canvases in Omnigraffle analogous to pages on a website, so I try to only use this action when linking to unique pages. It's also nice to use this to link form submit buttons to the page users should be redirected to when the form is submitted.
- Shows or Hides Layers - I'm a big fan of this action for mocking up interactions within a page. A good example of when to use it is if you want a modal window to appear when the user clicks a button. To do this, create a new layer of your canvas called "Modal Window" and set it to hidden. Then set the action on the button to show the modal window layer. For a final touch, create a close button and set its action to hide the modal window layer. Using "Show or Hides Layer" for these types of interactions keeps the number of canvases you have to manage from getting out of hand.
Using Your Prototype
- In Omnigraffle - The quickest way to try out your new prototype is to just use Omnigraffle. To interact with the actions you've created, either hold down "B" on your keyboard or turn on the Browse tool. You'll then notice that hovering over objects with associated actions causes a pulsating blue outline to appear. Clicking on the object will then execute the action. For better presentation, it helps to select "Hide Toolbar" from the View menu. A big drawback to testing out your prototypes in Omnigraffle is that standard browser actions, specifically back, are not present.
- Outside of Omnigraffle - If you want to share your prototype with others who don't have Omnigraffle, you'll need to export it. You can do this as either a PDF or as HTML. I prefer HTML because the person testing the prototype will experience it within a regular browser. This helps both because it simulate the look and feel of a web experience and because most of the standard browser actions are supported. The biggest drawback however of using either export option is that they do not support the "Shows or Hides Layers" action. If you're going to export your prototype, you'll need to stick to linking between canvases and to external URLs.
If you have any tips, comments, or questions about making Omnigraffle prototypes, please leave some comments. I'd be happy to discuss.
Cage Match: UX vs. SEO
In the UX world we talk a lot of smack about SEO. It's not just us, though. It seems like everyone I talk to has something bad to say about it: it's a scam, it's sleazy, it's black-hat, it's just a buzzword. We all tend to think that our disciplines are morally superior to SEO, and not without reason. SEO seems like it's about gaming the system to give your site an advantage (see this recent NYTimes article on gaming the system if you need convincing). Lots of SEO practices like link farming and keyword stuffing are cheap tricks that inflate page rank at the expense of more deserving sites and end users, but even honest SEOs using legitimate techniques get our hackles up.
When you do a search for UX and SEO you get a lot of crap. And I mean A LOT of crap. But amongst the crap are a decent number of articles that argue that SEO and UX not only should get along, but when done correctly, get along without trying. So why does it seem like every time UX and SEO get together it sounds like your peace-activist sister arguing with your pro-business father over Thanksgiving dinner? I think it's a problem of perspective.
Improve your site maps with page archetypes
Here's a pretty typical site map: boxes and arrows, a decision point, and a conditional section. If you're the person who diagrammed it, you already have a good sense about how the system will work. You know the major interaction paths and what type of content will be present. You know the purpose for each of those pages.
Yet those generic little boxes betray that knowledge. To those who weren't part of the creation process, it takes a leap of faith (and a lot of questions usually) to really understand what is occurring. These boxes don't communicate the context of the interaction. The intent and purpose of each page is a bit nebulous.
Page archetypes help you better express what's going on in your site maps and user flows.
Continue reading "Improve your site maps with page archetypes"