Mindfly Website Design Studio

Mindfly Web Designer Favorite

Blog

Our Posts on Web Design

Steve Krug Hits the Mark with His New Book

by Heather Alvis February 8, 2010 7:49 AM

Steve Krug's new book "Rocket Surgery Made Easy" is a helpful sequel to his first book "Don't Make Me Think". He describes the specifics of administering usability studies with details that I have been wondering about ever since I started thinking about adding usability to Mindfly's services. The book is written with the same writing style as his first book with bits of good humor sprinkled throughout - keeping the content light and readable yet highly informative. He offers scripts for the test administrator to follow and helpful checklists of "to-dos" prior to and following the testing sessions. One of the chapters even points out the most common problem with websites in general; not having a clear focus on the home page and a "call to action" for the user. Oftentimes the home page tries to display too much information and the users get lost before they even get started.

Steve Krug's New Book I'd recommend this book to anybody that is planning on starting a web project, whether it is a redesign or a brand new site. One important concept I got from the book is that testing users isn't rocket science or brain surgery (or rocket surgery), and with the tips and tricks in this book, you can do some form of testing right now without anything fancy. There are many more sophisticated usability tests you can do, but for the budget and time-conscious small business owner, there is still a way to test and get beneficial results. The second important concept I hope my clients would take away is that a web design should be made to help your users and not you - the business owner. Knowing your audience is critical when it comes to making design and content decisions. Your site should be designed to help your users find the information they are looking for -which is hopefully the information you want them to find - and to do so without having to think about it.

When making design decisions, it makes sense to have some data - not theoretical data, but real user data, which you can get just by watching someone. For example, if you offer classes as your main income generator, make sure your users can tell in the first 5 seconds of looking at your site. Show the schedule in a highlighted box with a button that says "click me" visually - write it out in big letters - give them more than one way to get to the class sign-up or description page. If you offer recipes as a side-service, keep it accessible, but don't use precious home page real estate to draw attention to them if the recipes aren't your focus (or they don't bring you any income). Added value services can be resources or footer material that users can find once they've been converted to customers. When you do your user test, see if your neighbor can find the page to sign up for a class. Watch the buttons he clicks on, have him tell you what he's thinking. You might be surprised to find that he didn't think at all the same way you do. Then test with your mom or dad or grandmother - if you dare - but as with any science experiment, don't think you have to fix every problem your mom or 10-year old nephew run into. Hopefully you'll find some similarities among the user experiences and find the problems that tend to affect the most people; fix those first.

Designing sites for small businesses lends itself to budget concerns especially when it comes to usability studies. Most of my clients, say 100% of them, have never heard of usability studies. They've never considered watching someone use their site for the sake of determining whether or not it works. Small business owners know they need a new site design - because it looks outdated, but rarely do they think they need revamping because their users are confused. If more of our clients read either of Krug's books, we wouldn't have to convince them that their site should focus on the user experience. Maybe we'd even have a few people request a usability study as part of their project. Krug's books are compelling, they make sense, and they make testing sound straightforward enough that anyone can do it. After reading, you say to yourself "Of course I need to do this for my website! Why wouldn't I? Let's do it today." Unfortunately, more times than not, life gets in the way; it's Monday morning, you open the door to your store, customers come in, you answer the phone, and the work week (or the company bottom line) takes precedence over your weekend good intentions of hiring someone to do a usability study on your site.

If you don't have the budget, or even if you do, spend the $35 on this book. Krug shows you what is really done behind the scenes. You can modify his ideas and do usability studies on your own. They won't be the same as the official studies a professional organization can do, but at least it is something, a step in the right direction. The bottom line is anything - any form of a usability study - is better than nothing. If you don't have the recording software, you can still do it - you just need someone to use your site while you watch them. If they don't see that button to sign up, or if they can't find that article you wrote last week without using the search, but they did find the newsletter sign-up link, you've got some usable data to work with. Once you have this data, your designer (or you) can start making educated decisions about what needs work on your site.

By all means, if you don't have the time, but you do have some cash, ask your web designer about usability studies - is it a service they provide? If so, have them do one and see what they find. You might find that your site is as clear and informative as you think it is. Chances are, however, that they'll come back with some recommendations - a design tweak or two that could make a big difference for the success of your site. Testing is an ongoing process, but remember, the goal is always the same - to turn more of your users into customers.

Tags:

Categories: Usability

Permalink | Comments (1) | Post RSSRSS comment feed

Balsamiq Mockups: Design Software Following the Pencil, Paper and Tape

by Heather Alvis July 16, 2009 11:50 AM

Upon returning from a multi-day adventure in Denver at Web Directions North last year, my colleagues introduced me to a software program called Balsamiq Mockups.  Since then, I've been using Balsamiq for all of our larger web jobs.  I'm really impressed with the simplicity of the interface and how quickly I can produce a completed mockup.   Within minutes of downloading the software, I was able to create a digital version of a paper prototype all-inclusive of links, image placeholders, buttons and nicely lined up columns.

Plethora of Elements

With all the sites I've prototyped, I've been able to find each element I wanted on a page in the pre-existing UI Library.  The developers were even sharp enough to include groups of controls such as "buttons", "containers", "media' and "text".  As a sign of the times, there is a section specifically for iPhone controls as well.

When creating a mockup, I first drag down the "Browser Window" control and specify dimensions for a typical site (960px wide x 1100px tall) and then I just drag and drop from there.  Menus are a snap as well as feature boxes, download buttons, and image grids. 

 

Grid System

One of my favorite features of the software is the way it handles grids and allows me to line up elements based on the edges or center point of other elements.  This also works for resizing elements.  Dragging pieces of a design around the page is so simple when you can line them up within a column layout and makes this software extremely usable for designing web pages.  I don't always use exact measurements at this stage, but not having to constantly eyeball vertical and horizontal alignment saves a lot of time.  

Copy Paste

A feature that is second nature with Photoshop was also included in Balsamiq; the ability to use the "alt" key to copy and paste elements (individually or grouped).  This feature is yet another huge time-saver for designers that use repeated elements within a page design.

Linking with Hyperlinks

For one small job, I was able to use the mock-up software to show how a simple form would work.  When other users that have the same software "click" on buttons in the design, they actually can go to other mock-ups, as if it were a working site.  This has big advantages for people developing forms, user interfaces and admin components of websites.  At this time, I'm the only one using this software in the office, and it is unlikely that our clients will have the software, but I can see that it would be a great feature for certain groups.

Export to PNG and PDF

Once a mock-up is complete, I export the file as a PDF or PNG and create a JPG that clients can view and print.  This has become an excellent way to help clients visualize the page design while still giving them free reign to move items around and modify sections without feeling like they're "undoing" a lot of work on our end.  Not only do clients feel better about making changes, but we also get an opportunity to hash out design decisions without focusing on imagery and exact content - which tends to bog down productivity. 

In short, I highly recommend getting a version of Balsamiq for your design projects if you regularly work on sites from the beginning stages.  Once clients see the mock-ups, they tend to feel more confident in your product, and they can visualize design concept more easily.  Balsamiq does offer a free demo that is well worth a 5-10 minute tour.  Give it a try with your next project and see how you like it.

Tags: ,

Categories: Web Design

Permalink | Comments (0) | Post RSSRSS comment feed