The SUMO Heavy Industries Blog

Design / eCommerce / Business / Culture / Life

Archive for the ‘User Experience’ Category

Optimize Your Wireframes and Mockups with FiveSecondTest

September 15, 2011 by John Suder

How can you be sure that your pages are sending the right message? Designers often straddle the line between good design/UX and what the marketing department or client tries to cram onto the page. Somewhere along the line, the message gets lost.

FiveSecondTest, as the name implies, is a website that helps collect anonymous user feedback via 5-second tests and quick questionnaires for participants.

Simply upload your mockups or screenshots, set some questions you’d like answered (ex: “Where do you click to make a purchase” or “What options are there for payment?”)

Test Set-up Screen

 

Feedback Dashboard

This won’t replace traditional usability or A/B testing, but it’s a quick way to get feedback on your designs from the community.

A free plan is available for designers to earn tests by taking tests. Paid plans start at $20/month, which gets you unlimited tests and 100 responses per month.

FiveSecondTest

 

 

Collect and Analyze User Feedback on Your Mockups with Verify

August 22, 2011 by John Suder

Verify Home Page

When designing web pages (epecially for eCommerce), it’s vitally important to know where your user is clicking or how they’re interacting with  (or reacting to) your page designs. Doing live user testing can be an expensive proposition, and calling in your friends to ask what they think of your designs just won’t cut it.

When adding new features to a site, how do you know you’re adding features a user even cares about? If you’re updating a site, how do you know which features to remove?

The Verify app bridges the gap and provides instant feedback from users who view your mockups or screens. Verify allows you to upload your designs and ask users their opinions of your concepts. The application allows you to perform 9 different types of tests:

Click Tests Find out where your visitors are going. Do people understand your product or service? Post a screenshot and visitors click on the screen based on your question or directive. These tactical tests determine simple things like ‘Can you find the link?’.

Memory Tests People get an impression of your site after less than a second of viewing it. Is your message clear? See what users remember after 5 seconds.

Mood Tests How do people react to your page? Positively or negatively? The mood test measures emotional response.

Preference Test Perfect for new designs. Users get to select between two options and tell you why.

Annotate Tests Sometimes you just want feedback – with the Annotate test, people will give it. This test lets users add notes to a screenshot based on a question or directive that you supply.

Label Tests Guide user feedback with placed labels. Place labels on your screen and ask users what they think it is.

Multi-Page Click Tests The simplicity of a click test, applied to a flow. Get a sense of where people click in a sequence or flow.

Linked Tests Get more data by linking your tests together in a unified flow.

The data is available almost immediately and you’re provided with a clear, actionable report that will assist you in making decisions about your design or concept. Plans start at $9/month.

You can also participate in live testing at Verify. No signup or email, just jump right in (warning: time suck ahead. It’s addictive.).

Verify Live Testing

Verify App

TechCrunch Redesign: The 90′s Called and Want Their Logo Back

July 13, 2011 by John Suder

For those who care about such things, venerable tech blog TechCrunch.com has redesigned their site. If you’re one of those that do care, you’ve no doubt seen the backlash of folks out there that absolutely hate it. I think it’s just one of those things that you’ll have to get used to. Case in point: when they redesigned the Gawker properties. Judging by the audience reaction you’d think they were dropping puppies off of a cliff. I’m a faithful Gawker/Gizmodo/Lifehacker reader, and yes, I hated it, but it grew on me. Because of the new navigation, I can scan through more articles in less time – that’s a win for me.

“I used to love reading TechCrunch. And now I have to soak my eyes in bleach every time.”

Here’s what I don’t understand about TechCrunch – they an AOLHufPo (or whatever thye’re calling it) property now . Is it that bad over there? Surely they must have some talented people left there that can design the front-end of a blog.

NO LIKE What on earth is going on here? If this were your first time here, would you know where you were? Not until you scroll down the page and the static nav bar reveals the site name. And the eight-bit treatment of the 8-bit logo doesn’t work. I’m pretty sure people aren’t nostalgic for the days of 256 colors. I get it – the blog has massive traffic and needs to be speedy – but this isn’t 1997.

TechCrunch Redesigned Header

KINDA LIKE Okay, so they went a little nuts with the Interstate Bold font for the article headlines, but at least they’re easily scannable. I also like having the social stuff tucked away in a dropdown – those little badges and the thousands of variants are really starting to crap up the web.

TechCrunch Single Post

The logo in the header is just god-awful – but I saw this version of the logo on their Facebook feed – I kinda like it. The simplicity makes sense when used in one color, not with a bunch of other ‘pixels’ riding inside.

TechCrunch Facebook Logo

I have a feeling we’re seeing a work in progress. I doubt they’d switch back to where they were – that’s be too painful for everyone. We’ll wait and see. And in the meantime, TechCrunch at least has enough humility to poke fun at itself:

Your Logo Looks Like TetrisWe Picked This Logo Just to Piss You Off

InVision: A Prototyping Tool Made For How Designers Really Work

May 25, 2011 by John Suder

Visual designers rejoice: Now there’s a way to design working web app prototypes that aren’t your usual stiff, scribbly, black and white, low-fidelity layouts with the same-old same-old UI gadgets.

InVision allows you to express yourself – go as a low- or high-fidelity as needed – using the design tools you’re already comfortable with. Create your designs as you like, then connect them using InVision, without any code.

invision demo app

InVision Demo App. The app is controlled from the tool bar at the bottom.

invision gallery

InVision file gallery.

InVision has a clean, drag and drop interface. Once you’ve prepared your screen layouts, export them to JPG and upload them to InVision in the Build Mode. InVision presents a gallery of your screens and you begin building from there. You then identify the clickable zones on your layout and link them to the other screens in your gallery (via a dropdown) to simulate workflow. If you’ve got a global link on your screen, InVision allows you to create a “template” – once you specify a link in the template, it will automatically apply that to any other screen in your app, saving you time.

Once you’re done testing your app in the Build Mode, you can click over to the Experience Mode to check your work. Then, export your project using the Share Project Screen Mode, which generates a unique URL to share with colleagues (they don’t need any logins or signup to view the projects). Your collaborators can then view the project via the browser. Tour Mode lets them view clickable areas, and they can also leave comments (which will triggers an email to you). After the client reviews, you can logo into InVision and see a global list of comments for the project. You can use the comments as a checklist as you address each comment.

invision share

Share Project Screen

Sample comment.

InVision brings visual prototyping out of the stone ages and creates a true user experience for your clients and colleagues (which is especially helpful when you have non-visual people in on a project).

InVision is quite affordable – plans start at $9/month, which gives you 5 projects and unlimited collaborators, unlimited sharing and unlimited storage. There’s also a freebie plan to let you try the service, but once you see how much time you’ll save, you’ll fork up that 9 bucks quicker than you can say Double Venti Expresso Peppermint Foam Latte (or whatever coffee drink you throw away 9 bucks on).

InVision App

Zappos.com Puts It’s Fat Foot(er) In It’s Mouth

July 29, 2010 by John Suder

The other day in Campfire chat, we were discussing the redesign of Zappos.com. The site has come a long way since their “Zeta” (Beta Version) design. Oh, and they’ve sold a crapload of shoes, have legendary customer service and were just acquired by Amazon.com, so they must be doing something right.) As we were looking over the redesign (executed beautifully by Happy Cog™ Studios), I scrolled down to check  the footer.

Oh no…the dreaded ‘Fat Footer’. This beast is over 1200 pixels tall.

I can just imaging the User Experience people in rolling fist fights down the hall with the SEO and Marketing people, all fighting for their pixels of real estate. Sadly, the reality is that the ‘Fat Footer’ is now fairly common in large eCommerce websites. Putting that aside, I noticed above the footer a rotating set of ‘Zappos Family Core Values’ (like number 10: “Be Humble”.) These ‘Core Values’ are something that Zappos is known for, and they smartly use  it as part of their marketing. I reloaded the page a view times to view some of the other ‘Core Values’, when I stumbled upon this one: “8. Do More With Less”…unfortunately perched right above their 1200 pixel footer.

Sometimes it’s all about the context, folks. Zappos Giant Footer