Timoni Grone is the senior visual designer at Scribd where she creates websites that blend responsible web practices with classic design & typographical philosophies. She also co-founded the monthly design MeetUp and work session Chromatic where Bay area designers meet to network share ideas and design challenges. It’s part of her effort to expand the reach of user-centric design and make your web experience just a little bit better. Timoni is interviewed here by Emily Goligoski.

Notes on Design: How did you get your start?

Timoni Grone: I was an English major in college but talked about art and design enough that a friend encouraged me to take an art class, and I’ve been making sites and designing for friends since 1999. I’m largely self-taught—I looked at course syllabi and taught myself design fundamentals.

My second job was as a web editor for the State Department creating mockups for sites to expand dialogue with the Arabic world. I didn’t expect that I’d ever work on security and public diplomacy, and it was eye-opening.

NoD: Wow! Not your typical design gig. Where did you go from there?

Timoni Grone: I ultimately left to work at a DC branding agency in the research sphere before moving to San Francisco, where I’d wanted to be since I was using early social media tools in Nebraska while still in college.

NoD: And in San Francisco you began working at Scribd where you are now the Senior Visual Designer and have been largely responsible for their redesign effort. What other sites that you frequent are you itching to redesign?

Timoni Grone: Twitter, no doubt about it, so that people wouldn’t have to use third party applications to have a good experience. I’d improve the leading on Facebook, but on Tumblr I wouldn’t change much beyond the implementation.

NoD: Can you expand on your comment regarding third party apps and how Twitter could improve if it did not require them? Isn’t Twitter improving because of third party apps..and is that built-in flexibility not what makes it, in part, so hugely popular? Read the rest of this entry »

The World Wide Web Consortium is planning to implement a new version of the Web accessibility guidelines this year, and it seems like many people have had negative things to say about the version 2.0 update (not official yet). These guidelines affect the way designers and developers build sites for the disabled, so it’s more important than ever as the Web becomes the de facto repository for information, commerce and entertainment.

People smarter than I think the project is confusing, long overdue, and that the process of revision is broken.
Read the rest of this entry »

By Mike Madaio

Mike,

Why do all of the coolest technologies have such major usability problems?! I’m pretty much an entry-level coder (HTML, some PHP), but I want to learn something higher-end like ActionScript (Flash coding) or Ajax. But then users seem to have such issues with Flash and Ajax. Which one should I focus on learning if I’m pretty concerned about usability?

Thanks!

Diane
Read the rest of this entry »

You asked your usability questions, and Mike has answered! We invite you to ask more questions

Hi Mike,

I really want to do focus groups for my sites, but I’m just getting my business off the ground and my clients aren’t exactly high-paying. How can I test out my site cheap and still get useful info out of it? Hope you can help!

Rob Read the rest of this entry »

You asked your usability questions, and Mike has answered! We invite you to ask more questions here

Hi Mike,

I work for a small web design company, and have been arguing with one of the designers about when we should do usability tests for our projects. I think we should do them close to the beginning, after we have a few main pages done, so we can make changes if there are big usability problems. But he thinks we should wait until the site is considered final so the test covers everything. Which is better? (Keep in mind, I owe him lunch if I’m wrong.) Read the rest of this entry »

How do you turn a cool concept into an interface that’s easy to use? Ask Mike!

We’re very excited to announce the birth of our new column “Ask Mike!”, where guest author and usability expert Mike Madaio will help you make sense of fundamental user concerns, emerging technologies, and the ins and outs of usability testing.Mike also writes for NoD on a range of user experience topics.

Mike has been creating online user interfaces for more than 10 years. He currently serves as Chief Internet Architect at QVC, overseeing the online customer experience team, including user interface design, site navigation, information architecture, usability testing and integration of new technologies.

If you have questions for Mike, go ahead and post them as comments to this post on NoD. He will reply to questions frequently under the “Usability” category of Notes on Design

If you’ve looked around in Google’s Webmaster Tools (See Part 4 of my series of posts on the tools), you’ll see where you can upload your sitemap file for your web site.
Now, if you’re an inquisitive person like me, you might be asking yourself some questions, namely:
What are Sitemaps? What does the sitemap do for you? Do you need one?
In this post I will address these questions and hopefully provide satisfactory answers for them. Read the rest of this entry »

Though it seems like something we should have figured out by now, it is amazing how often the subject of whether to underline or not underline links comes up in design process (or, alternatively, how often links that should be underlined are not underlined). From a design standpoint, underlining links, especially when there are quite a few of them, can create visual clutter and thus is often disliked from this perspective. Links, however, are the lifeblood of any website, so it is crucial — more crucial than a good design, in many cases — to ensure that these links are inherently obvious to users. And, despite the fact that most of us reading this blog are likely people who live on the internet and need little help determining what is a link and what is not, in many cases we still need to design for people who are only familiar with the most basic internet conventions (i.e. text that’s underlined is clickable) and/or use the web infrequently.

Guideline

If it looks like a link without an underline, it probably doesn’t need to be underlined. If it doesn’t look like a link, it probably needs to be underlined.

Though many qualified user experience designers can probably follow this vague-but-simple rule successfully, it may be beneficial to break down into more detailed guidelines, especially as a communication aid to use with designers who may be less familiar with user-centered principles.

Always Underline

When in Doubt: This may seem a tad obvious, but it’s worth repeating. If you aren’t completely sure, underline. It doesn’t look that bad, and it confirms for all users that this is indeed a link.
When You Can: Similar to my last point, if you can underline a link without causing too much of a design problem, you should. It never hurts to make things abundantly clear for your users.
Within Blocks of Text: Absolutely underline all links that are contained within sentences, paragraphs, etc. As users scan text (online, people rarely read from start to finish — they scan for key terms), underlines signify key works to read. Color is important too — but using both color and underline is the clearest, most obvious way to call out the links to users. If you just need to call out a word that isn’t a link, use bold or italics in the same color as the base text to reduce confusion.
Isolated Links: Links that are on their own within a section of a page should be underlined when possible. Read the rest of this entry »

Introduction

This is the second in a series of articles I’m writing to cover a number of quick, easy usability tests that designers can do in very little time and at low or no cost. The first article covered testing button label clarity and effectiveness. This article addresses a test for something more ephemeral—branding and ethos.

Test #2 – Branded Layout

Test category: Branding / Ethos

What we’re testing: A web site home page. However, this type of test may be used on any type of layout where the goal is to communicate a brand’s ethos.

What we want to know: Which version of a design best communicates the desired brand qualities?

Why this matters: At a high level, a brand’s ethos can be supported or degraded by design choices, so it’s important to learn as early as possible how the brand’s target audience reacts to a design direction. Closer to home for many designers, of course, is that this test can help a client see design through their audience’s eyes, potentially saving many fruitless hours of discussion.

When to do this test: Typically this type of test is performed in the early stages of a design or redesign project, in order to validate design concepts and direction before major production work begins (especially in the case of a web project).

What the test tells you: This test will tell you the qualitative effect each design has on the audience. That is, what emotional response does each design evoke? What qualities do audience members associate with each design?

What the test DOESN’T tell you: This test won’t tell you whether the layout achieves any other goals – such as whether it’s easy to use or communicates what the company does. This test is also poor at distinguishing between the effects of quite similar designs.

What you need: For this you need a list of descriptive words, and two to five versions of a layout.

- Layouts: The design approach in each version should be distinctly different from all others in the test, otherwise you won’t get truly reliable results. Many companies have a different designer create each test concept for this exact reason.

- Word list: the word list should contain up to four “target” descriptive words identified by the client as the desired brand or ethos descriptors. Mixed in with these target words add about 4X that number of additional descriptive words.

So, for example, if you have two target words, “sophisticated” and “high-quality,” add 8 more descriptive words into the list. Make sure you select words that are reasonable (no crazy outlier words, please!) and quite different from each other, or you’ll end up with less clear test results. Be sure to include some negative words, too!

A sample list containing “sophisticated” and “high-quality” might look like this when you show it to test participants:

Interesting			Dark
Sophisticated			Intriguing
Complicated			Colorful
Dull				High-quality
Expensive			Solid

How to set up: Arrange the layouts so you can show them to test participants one at a time – one per printed page or per screen—to minimize any cross-influence. Make sure you’re able to vary the order in which you show the layouts to remove that potential skewing factor as well. Keep track of Read the rest of this entry »

Introduction

Web and interface designers are in a unique and powerful position to serve as user advocates. By incorporating usability and conversion principles into design from the beginning of the process, designers can help ensure the user-friendliness and effectiveness of the end product.

It sounds great, right? But how (you may ask) can designers do this? Classes and reading are one way, of course – having a solid understanding of usability best practices and research will naturally influence your design decisions. But getting from the theoretical to the applied can be a challenge, and best practices are not, in my experience, always sufficient. Ideally, each unique design is tested with representative users to validate whether it really accomplishes what’s expected.

Which is where this series of articles comes in. I’ll cover a number of quick, easy usability tests that designers can do in very little time and at low or no cost. You’ll end up with validated designs, better end results and a growing understanding of the complex, powerful relationship between usability and design.

We’ll start with a very simple test, and build from there.

Test #1 – Button Labels

Test category: Expectancy

What we’re testing: Button labels

What we want to know: Which version of a button label best communicates to users what happens after they click the button?

Why this matters: Button labels are a crucial point of communication. If users quickly and easily “get” what will happen when they click a button, they’re more likely to do so. If, on the other hand, a button label is unclear, confusing, or makes users feel uncomfortable, they are likely to hesitate or avoid the button altogether.

When to do this test: Conduct the test whenever button labels are being finalized or updated. This can happen at just about any stage of a design or redesign process.

What the test tells you: This test will tell you which one of two or more button labels does its job the best. You want a button label to support the audience’s mental model—that is, what they expect to see or have happen when they click the button.

What the test DOESN’T tell you: This test won’t tell you how the button will perform within the context of an actual web page or application. Users may understand a button label when viewing it in isolation, but when many other factors come into play the results may vary. For instance, users may not see the button or may not be sufficiently motivated to click it, depending on its placement, the other messaging on the page, what the user has experienced prior to the page, etc.

What you need: Several buttons identical in design but with different labels. These can be low-fidelity sketches or high-fidelity Read the rest of this entry »