General
You Might Make a Great UX Designer At Viget If…
When I was a kid, I never thought to myself, "Man, when I grow up, I want to be a UX designer … " I'm not sure that the title even existed then. Yet, here I am, many years later, working as one at Viget. The different paths people take before they eventually determine this is the proper field for them are too numerous to count. While UX designers (or whatever official title is cool this week) come from all different backgrounds and educations, I think there are certain qualities many of them have that lead them down this particular path in the first place. These are qualities that I see in both myself and my fellow UX designers here at Viget. If you possess these qualities, you could be a good fit here, too.
You might make a great UX designer at Viget if …
Continue reading "You Might Make a Great UX Designer At Viget If…"
User Interview Tips for Non-UX Designers
Talking to users is an important part of the design process because it provides us with the opportunity to gain insight and validate our ideas. If we have a solid understanding of what users need to achieve and the challenges they face, we can make better design decisions and craft stronger solutions.
Sometimes it is necessary for other team members, such as a project manager, to jump in and help conduct an interview. For individuals that don’t have experience conducting interviews with users, this can feel like a daunting task.
By keeping a few key points in mind, however, you can conduct an interview that will lead to insightful results.
Omnigraffle Stencil for Clickable Form Elements
One of the things that slightly bugs me about Omnigraffle is that it doesn't have built-in objects for basic HTML form elements that behave like real ones. I would love to have these to add a little more realism to my wireframes and possibly extend them to work inside of a more full-on prototype with "real" forms. So, I recently took a shot at creating some clickable form elements for myself using a combination of Applescript and the custom data feature.
Warning: What I hacked together works, but its not foolproof. I've included some notes below that should help you in using this stencil.
Download the Stencil (Viget.FormElements.gstencil, 156 K)
Checkboxes
- These can be clicked on to toggle between checked and unchecked states.
- The label is stored as "value" within the object's data.
- The state (checked or unchecked) is stored in the object's data and can be keyed off of for further prototyping.
Radio Buttons
- These can be clicked to change the selection in a group of radio buttons.
- The label is stored as "value" within the object's data. The state (selected or unselected) is stored within each object's data and can be keyed off of for further prototyping.
- They are grouped together as a table, so it's easy to add new rows or columns of radio buttons.
- The unselected radio image is a separate object that needs to live behind the table and can't be grouped with the radio buttons (sorry, it'll break the script).
- To create multiple groups of radio button on the same canvas, you'll need to give each group a unique name. The table has a data item "groupName" currently set to "Fruits". Each object in the table has a data item "group" - also currently set to "Fruits". Both of these need to be changed when another radio group is created.
Drop Downs
- The option that will be displayed when the dropdown is collapsed is stored as "defaultOption" within the object's data. When it's expanded, "allOptions" will be displayed.
- A lot of the styling is contained within the script, so if you want to tweak the styling, I would suggest looking at the script to see how styles are being applied.
- The value that is selected is not passed back to the parent object, so this element is not set up for further prototyping. It is good for showing the list of drop down options without using another layer.
I've also included some buttons and text fields in the stencil. I'm sure there are improvements that can be made to these, so everyone should feel free to use and modify this stencil. If anyone creates something better (especially a dropdown that fully "works"), I'd love to hear about it.
5 Ways to Get Past UX Designer’s Block
Like any other creative professional, I get stuck from time to time moving forward with my designs. When this happens, I find the following techniques to be helpful.
1: Stop Thinking So Much
Often, my creative blockage is simply a product of overthinking. I'm trying to reinvent the wheel. In these cases, I ask myself questions like "Have we already established a design for a similar piece of content on this site?" or "Would a simpler, more standard pattern be good enough for this interaction?"
2: Take a Step Back
Putting the blinders on and zooming in on a specific element of a page or a particular step in a flow can be a good thing. That kind of hyper-focus can lead to precision and thoughtfulness. However, it can also lead to getting tripped up on the small things. When I get stuck on the details of a page layout, zooming out helps me see the big picture and move forward.
4: Do Some Research
I'm not always as prepared to design a solution as I thought I was when I fired up Omnigraffle or grabbed a pen and paper. In these cases, I do some light research on the topic or check out designs that others have used to solve similar problems.
3: Separate Entirely
Sometimes, there's no avoiding the need to just clear your mind. I've never been particularly good at putting my head down and powering through a problem. For me, getting up and walking around the office, grabbing a soda, or reading a blog post can be very effective ways to get past blockers. Once I've taken a little break, I come back to the problem and see if any new ideas pop into my head.
5: Ask For Help
Fortunately, I have a great team of other UX designers (as well as a bunch of other specialists at Viget) that I can bounce ideas off of and get valuable feedback. Often, just the act of expressing my problems to someone else will lead to a solution.
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.