Archive for the ‘Featured’ Category

posted by Leslie December 2nd, 2011 Featured, typography

Typography Basics to Avoid UX Problems">

Typography Basics to Avoid UX Problems

One of the most epic battle of wills I ever engaged in with a client was over typography. The client did not want to listen to me because I was hired for research, not for design. Yet, the purpose of a UX specialist is to alert the client to all things that could negatively impact the user experience, and that was my intent. (I also spent years studying spatial vision, so sometimes I latch onto these issues.)

Without revealing too much about the client or the project, the problem was simple: The fonts used in the website design were not the best choice.

One of the things I always recommend to clients is this: Look at your design in its intended medium. If you have a hard time reading the text on it, then so will many others. This particular client, however, assured me that all would be well since the designer said it would be OK to use this font because it was optimized for that specific font size. Looking at it however, the issue to me was very clear: Serif font packed densely into a small on screen area. Broken down at the font level, the component parts of the issue can best be described as:

  1. Inadequate kerning, leading, and measure.
  2. Creation of unnecessary ligatures.

Unless you have a background in typography the terms kerning, leading, measure, and ligature probably mean nothing to you. Not to jump ahead too far in this posting but, kerning, leading, and measure all relate to spacing. Ligature is a result of spacing, and refers to the creation of shapes from letters. Before we begin, I’m assuming everyone reading this post knows the difference between serif font and sans serif font. If not, here it is:

An example comparing serif and sans serif fonts

 

Next, are the concepts of baseline, meanline, and x-height. Baseline is just what it sounds like, the line upon which the main body of a letter rests. Meanline is the line resting on the top of the body of lowercase letters. The meanline usually cuts through an uppercase letter. Finally, x-height is the height of the body (main element) of a letter that equals the distance between the baseline and the meanline. Baseline and meanline give rise to two important pieces of letter anatomy: Descenders and ascenders. Descenders are the portion of a letter extending below the baseline. Ascenders extend above the meanline. Just to be clear, descenders and ascenders DO NOT contribute to a letter’s x-height. Please see the image below for a clarification of these different concepts:

The basic components of letters in a font.

Before we move on, one last point about x-height. As I mentioned earlier, x-height is the distance between the baseline and meanline of letters. It’s this feature that impacts a reader’s perception of the size of a font. For example, look again at the first image in this post showing serif and sans serif fonts. The sentences “This is serif font.” and “This is sans serif.” are both 60pt. font. However, the serif font, Times New Roman, looks smaller than the sans serif font, Lucida Grande. This is because of the difference in x-height. A smaller x-height means a font will look smaller to readers.

Finally, we can understand the first issue mentioned earlier in this post: Inadequate kerning, leading, and measure. The definitions of each term are found below:

  1. Kerning, the adjustment of space between individual letters.
  2. Leading, spacing between lines of type. (Note, it is pronounced ‘ledding’, referring to the use of lead strips to add space between lines in the early days of printing and typesetting.)
  3. Measure, the length of a line of text.

So, based on these definitions, we can now understand a few key concepts…

Kerning, if too small, can lead to overlap between letters, rendering them illegible. Rounded letters (o, c, e) will experience this sooner than straighter letters (i, l). On the other hand, too much spacing can destroy the perception of a word itself, or make the whole copy look ugly. This concept applies to paragraphs of text as well: too much spacing between words can destroy the continuity of the paragraph, making it difficult to understand and less than aesthetically pleasing.

Leading can also make or break the legibility or aesthetic quality of copy in a design. For fonts that tend to have less whitespace around them, such as smaller fonts and fonts with larger x-heights, larger leading is necessary to ensure readability of the text. Leading also interacts with line length, or measure. To sum that relationship up, the longer the line length is, the more you should consider increasing leading to reduce the likelihood of readers doubling over lines.

With measure, a bit more explanation is required. As stated before, measure refers to the length of a line of text. Research has demonstrated that long lines of text force readers to search for the start of new lines of text in paragraphs. Also, longer lines of text with inadequate leading will cause readers to lose their spot and read the same line multiple times. (This plays a bit on short term memory–so much information coming in over an extended period of time will make it hard for the reader to recall what they initially read.) Conversely, shorter lines require a lot of back and forth eye movement on a page that can lead to visual fatigue. That being said, line length is governed by the amount of copy in a design, the size of the font, and perhaps any sort of effects you mean for the text to create in the design.

Now, we can address the second issue: Creation of unnecessary ligatures.

A ligature refers to multiple letters that appear joined together and form a shape. In the past, ligatures were used to aid the readability of certain letter combinations. And certainly, back when printing was a new technology, this helped readers recognize the words on the page. Now that most everything is digital these days, and that there are many different fonts to use, ligatures are not as necessary as they once were.

Examples of ligatures, and what letters look like without ligatures.

Does the image illustrate why ligatures might not be a good thing sometimes? More importantly, can you see how ligatures might be created?

Putting all of the above concepts together, you now have the very basics of typography. I hope that it can help you in future projects recognize good and bad usage of type in designs.

(However, there is one final word I’d like to say on this point. Before criticizing the use of type in a design find out if there is a purpose behind it looking the way it does. As much as many people only think of type as a form of language, it also has the ability to inspire emotion and reinforce the goals of a design. If the design uses cramped and difficult-to-read text, perhaps it is to inspire discomfort in order to reinforce the design.)

posted by Leslie May 23rd, 2011 Featured, Others

The User (Customer) Experience Can Block Competitors">

The User (Customer) Experience Can Block Competitors

Monday…Another week, another observation…

Something I’ve noticed while working with technology is that remaining a moving target is a good thing. Take Apple, for example. Back in the day when the iPod was all the rage (despite that awful, awful clickwheel), other manufacturers immediately jumped in the ring with their portable MP3 player offerings, like Samsung, Rio, and Microsoft. So, by virtue of being first to market, Apple exposed the consumer want/need for portable MP3 players and also the weaknesses of the iPod for exploitation by competitors. But then Apple evolved the iPod product line–nano, shuffle, touch–all of these came over the following years accompanied by general improvements in hardware and advances in the programming languages used to support the devices’ functionality.

Basically, as the lineup of Apple products evolved so did the customer’s experience. This happened on two levels. First, there was just the validation that came with owning an Apple product. By owning an Apple portable music player, you were seen as someone who was in on the latest-and-greatest technology. And as a result you were someone who probably became a bit more fluent in the changing interaction language of portable devices that Apple was driving. The interactions that came with these devices were the second part of the evolved experience. These interactions were more physical. So, instead of interacting with menus through some thingy you probably couldn’t name on the outside of the device, you were randomizing song order by shaking your device or directly tapping the item on your device’s screen. Such interactions were novel, cool, and gave users an increased perception of control over their device.

The combination of how Apple played into the perception of their customers and the way they evolved their products made them stand out even more from their competitors. In fact, it even made some of their competitors look silly by comparison. And now, everyone is trying to do what Apple did. Some companies are doing a good job of evolving their devices to compete with Apple, but they are lacking in how they validate perceptions of their users. Other companies have done a great job of offering a good user experience and creating a validated perception of their users. For example, think of owners of Android-based phones vs. iPhone owners. Both groups of owners can claim pretty decent user experiences (depending on what they do with their device). Both definitely perceive themselves in certain ways, and the companies that market their products to each base do what they can to support those perceptions. As a result, there is some pretty heavy competition between Android and iOS. But between other mobile phones and them? Not so much.

I’m going to be curious in the coming months to see which companies it begins to hit home that good user–customer–experience can set competitors apart.

posted by Leslie March 4th, 2011 Featured, Others

Diagnosing Yourself via iPhone? Hmm…">

Diagnosing Yourself via iPhone? Hmm…

Courtesy of the NYT: Do-It-Yourself Healthcare with Smartphones

I remember back in 2007 when I started hearing the term “electronic health records” (EHR) in office conversation. My familiarity with the technology at that time was minimal–I knew that George Washington University was integrating them into their healthcare system, but only because I had previously lived in Washington, D.C. at the start of that initiative. But then Google Health and Microsoft’s HealthVault–the names in personal health records (PHR)–came along, and they allowed people to securely store their medical information online to make it easier for medical professionals to access. Finally, in 2009 there was the founder of Athena Healthcare on cable news talking about getting funding from the new Obama Administration for development and launch of an electronic health records system that would be the first step in taking that technology mainstream in the medical profession.

Well, it’s 2011, we’ve moved over the EHR/PHR push, and we’re FINALLY talking about making mobile devices a part of actual healthcare. And I don’t mean the chatter about, “Oh! Look at my cool pharmacy app so I don’t give my patients the wrong meds!” I’m talking about the kind of apps–and peripherals–that will allow the individual to monitor and truly take ownership of their own health. So now, instead of relying upon the doctor to tell them that their blood pressure is too high, someone can actually hook up nifty little devices such as THIS to see how they’re doing. The nice piece to all of this is that people can take their health stats from these devices and apps and add them to their PHRs.

Now, if it goes into a PHR I can already hear the argument from some people: “Someone might deliberately lie to make it look as if they’re healthier than they are.” OK, yeah, maybe. But do you really think those people would have PHRs in the first place? The bottom line is, by giving the average person such a tool there is the side effect of people trying to self-diagnose and basically driving the physician batty trying to deal with that. However, think of what it can do in terms of providing the physician with an overview of the trends in someone’s health. Ideally, it can make the diagnosing easier, or at least present another piece of the puzzle that the physician needed to gain clarity into what they see with a patient.

That being said, depending upon the app or the peripheral, the actual value of the output to the physician will really depend upon the user’s level of sophistication. For instance, the NYT article I cite above mentions MyGlucoHealth and the benefits it can have for seniors:

“In February, Entra Health Systems announced a deal with the Swedish mobile phone company Doro to make its MyGlucoHealth service available on their senior-friendly cellphones. With a small device, blood glucose level readings can be sent by text message to a secure MyGlucoHealth portal, which provides instant advice to users on what to eat.”

That’s fine and dandy. Even more fine and dandy is the fact it’s going to appear on a senior-friendly cellphone. But, how senior-friendly is senior-friendly? At some point, the user will have to be adept enough with technology to actually interact with the device to successfully retrieve and act upon the text message. And since most human factors, ergonomics, and user experience people will tell you that no matter how easy an interface is to use there is always someone out there who will make mistakes using it or be unable to actually complete a task, I do worry about certain segments of the population being unable to use health apps and peripherals at all, or correctly, for that matter.

Anyway, the article ends on the note that integrating PHRs with EHRs will extend the benefits of integrated mobile health apps and peripherals’ information as it will allow for information from the PHR to automatically transfer into EHR files if people so choose. However, the data lacks a certain level of credibility–and utility–if it isn’t being entered by a medical professional (once again, harkening back to my earlier argument of the output is only as useful as the user is sophisticated enough to understand the device and its information).

In any event, I can see a nifty diary study of some of these healthcare apps. Of course, they’d have to be done in conjunction with medical professionals and medical institutions’ IRBs, but perhaps less sensitive data such as weight loss and dietary monitoring output could be done by those of us who don’t have access to IRBs and physicians?

posted by Leslie February 22nd, 2011 Featured

Apps vs. Sites">

Apps vs. Sites

When the iPad came out I began to wonder: What’s going to happen to the website as we know it? The internet isn’t going to go away anytime soon, that’s for sure. But the technology for accessing it is becoming more streamlined. It started with the MacBook Air–no CD drive, flash memory, wireless connectivity capability. Using the MacBook Air, you had to be able to survive as a minimalist by having all of your software and docs already installed on the device or having what you needed available on sort of portable or cloud storage. The iPad takes that a step further by leveraging the fluid interface design seen on the iPhone and expanding it to a slightly larger device with a bit more power. There is no software, however, to install on the iPad as it works on a series of apps downloaded from the App Store. And the constraints of the device itself have led to the development of a distinct design style that companies are thinking of as a specific skillset that designers must develop.

It isn’t just the iPad, though, that’s driving this. It’s the onslaught of touchscreen devices and tablets in general. Optimizing a website for a touchscreen device, which is most often a mobile phone, or a tablet means turning the concept of a website on its head. Displaying a website on such devices means designers and developers need to be able to ‘trim the fat’, so to speak. Important functionality must definitely be there, but the overload of visuals, frivolous animations, and pointless features is no longer needed–or viable. Users need to be able to access the important information or perform important tasks while on the go, and they don’t need anything getting in their way.

With this very distinct design style, advances in web programming languages such as HTML5, CSS3, and jQuery, and the growing capabilities of touchscreen devices and tablets, it’s only a matter of time before the traditional website becomes a web app.

Not a native app, a web app. Let that sink in exactly what I’m saying here. Native apps are optimized for a system, run on the system directly, and require very specific skillsets that can be expensive to maintain on staff or to hire in directly. A web app, while still needing to be optimized for different browsers, has more flexibility in that it relies on a combination of client-side and server-side technologies to deliver content and functionality to users, and users can download content to keep files and data on their devices. And because it does not rely solely on the device displaying it, it can actually be used on a wide variety of devices.

So what does that mean for companies’ websites? It means these companies will have a new way to interact with their customers if they do it right. Retailers, for instance, can begin creating more immersive experiences. Instead of static pages, or pages with dynamic content portions, shopping can be done from a large catalog that users interact with through a series of tools or guides to find the right outfit or the right accessories. Social networking sites can create interactive maps to track activity, closeness of connections, and even the creation of new connections.

Now to answer my question about what will happen to the website as we know it: It will become a relic, a great reminder of how far technology has come in relatively short time.

posted by Leslie February 2nd, 2011 Featured

The Daily: Leslie Goes, “Ooh! Ahh!”">

The Daily: Leslie Goes, “Ooh! Ahh!”

Today, while stuck at home with 3.5 ft snow drifts and no internet, I listened to the news on my Sirius satellite radio. One major story–aside from that of Snowpocalypse–was the debut of the first ever iPad ‘newspaper’ app, The Daily. What struck me more than the business model ($0.99/week or $39.99/year for content that you can’t get anywhere but through the app itself), was the amount of techie brouhaha surrounding it. This alone got me excited because that usually means something truly unique or monumental is being accomplished with an application. Rupert Murdoch, founder of Newscorp, and Eddy Cue, Apple’s VP of Internet Services, introduced The Daily to the world as the first app of its kind. So, once I had access to the internet again, I downloaded it.

Screenshot of The Daily opening screen with notice of 2-week free trial.

And what was my reaction? “Ooh! This is pretty cool!”

In terms of design, it’s clean and uses space well. Users can peruse content by swiping through items in coverflow view, but it is called carousel by the developing team. As an added bonus, these content items rotate on their own after a set amount of time. Within each item, interaction is intuitive and the results engaging. For instance, swiping left to right in an item while in portrait view takes you through pages of the story. Changing the orientation of the device to landscape view lets you view photos. You can then swipe left and right to view photos. This interaction can get a bit confusing the first time using the application. Some articles swipe left to right to advance through them, while others, such as in the Apps & Games section, require a user to swipe down to read an article and left and right to switch between articles. Luckily there are usually pretty clear visual cues for this, like in The Coquette, the daily advice column: An arrow at the bottom right of the screen indicates the need to swipe down for more content.

There’s a strong social component to the application, too. Users can post to facebook, twitter, or email the story. Leaving comments is, of course, also available. However, you can actually record a comment.

Another cool factor: Video anchor! While in carousel view there is an expandable control panel with an icon that looks like an old TV set. Tapping it will launch a brief video giving an overview of the current article. There’s also story audio that can be accessed by tapping on the headphones icon. This audio will play in order of the articles in the issue, or can be randomized by clicking on the shuffle icon.

Navigation gets an A- from me. The main navigation consists of only 6 items: News, Gossip, Opinion, Arts & Life, Apps & Games, and Sports. Tapping on one, though, launches users into the first item in that section sometimes with no clue as to how many other, or what are the other, items in the category.

Features in this app are fantastic. In the Apps & Games section there are useful app reviews, and daily sudoku (WIN!) and crossword puzzles (meh). There is also a daily horoscope feature and local weather, which I should have mentioned early–the weather feature is pretty nifty. Both the horoscope and weather can be set by the user in their account settings, and once set up, the weather will allow a 5-day and 12-hour forecast. The cool factor increases with the 12-hour forecast as it includes a slider users can move to see the time, phase of the sun or moon, cloud cover, and temperature.

All in all, this seems like a nifty app so far. And in an effort to convince everyone, Verizon is covering a 2-week trial period for new users of the app. With that, what’s the reason not to check it out? (And if won’t check it out because it came from Newscorp or Rupert Murdoch, then your loss.)

posted by Leslie January 17th, 2011 Featured

UIX White Paper on UX Research for Small Businesses">

UIX White Paper on UX Research for Small Businesses

UIXperience (read: ME) has written a second white paper. This one briefly covers a topic close to my heart: UX Research for Small Businesses. Download your copy here!

posted by Leslie December 20th, 2010 Featured

Thoughts on Mobile Touchscreen Gaming">

Thoughts on Mobile Touchscreen Gaming

Phantasy Star II Text Entry
A few weeks ago I put out a white paper on mobile shopping applications that pointed out there has been an improvement in mobile application architecture which accompanied a 21% increase in smartphone ownership around the world. The biggest gains in ownership were found among Android and iOS platforms, unsurprisingly. Anyone who spends anytime lurking on LinkedIn or job posting boards will see a huge push for iOS and Android developers. And looking at applications for each of these platforms, in particular game applications, will reveal steady improvements over the years in interface design, multiplayer capability, social network linking, and overall responsiveness. So what does all of this mean for gaming applications, you might ask?

As with any technology advanced capabilities can be a double-edged sword. Improvements in interface design do not necessarily equate to smarter interface design. Usually it means that certain types of controls and interactions can be used due to an increase in familiarity with the platform and the different devices’ technical capabilities. And really this is at the heart of the matter: Improved interface design should support successful gameplay, multiplayer capability, and social network linking. After all, if an application’s interface design is awful for the actions intended, then it doesn’t really matter how fun your game is, how awesome the multiplayer campaigns might be, or how cool your facebook page is going to look with all of the new medals from your game posted it on because you cannot effectively interact with the game.

This begs the question, then, about what constitutes good touchscreen game interface design. And the answer becomes pretty clear when you consider mobile gaming scenarios and issues with touchscreen use in general: Adequate feedback, quick application responsiveness, clear visual affordances, and easy-to-learn gestural interactions. To better understand why these 4 concepts are good answers, let’s consider them one by one.

1. Adequate feedback

The typical definition of adequate feedback tends to be whatever is enough to get a user to realize that their action has had an effect. Touchscreen devices rely heavily on the visual modality, so the first thing that springs to mind is use clear visual feedback. Well, that’s a really nice idea but have you considered that users cannot see through their hands and fingers, and those things may be blocking the screen location where the visual feedback might be occurring? Because of that possibility, consider crossmodal feedback. Crossmodal feedback is just a fancy way of saying, “provide feedback that users can receive via two or more sensory modes.” So, maybe visual feedback in the form of a glow on screen and a specific sound for auditory feedback. Another possibility is tactile feedback for devices that support it. In fact, research conducted within the past 3 years has shown that tactile feedback actually improves users’ awareness that their actions have had an effect on the system (Hoggan et al., 2008).

Now, tactile feedback might be expecting a lot, but take a moment to consider that many touchscreen devices are being used while on the go, so users might be in an environment where they either cannot clearly hear auditory feedback or they might mistake ambient noise for auditory feedback. Combining tactile feedback with visual or auditory feedback can make it clear that an action was actually registered by the system and has had an effect.

2. Quick Application Responsiveness

This sort of goes hand-in-hand with the first point I made about feedback, but this one pertains to all types of interactions in a game regardless of the presence of feedback. Users are very impatient, and when they don’t receive feedback within an acceptable amount of time they tend to do one of two things: Repeat the action until they get some sort of response, or quit. Both of these could have some very frustrating unintended consequences from a gameplay perspective. An argument could be made that mobile gamers are probably a little bit more tech savvy than their non-mobile gamer counterparts, and it’s possible that this is true. However, as a whole mobile technology is one of the more poorly understood technologies out there by users in general–regardless of their ability to use technology. So there is still a very good chance that they will tap wildly on screen or quit a gaming application if they do not receive some sort of application response within a reasonable timeframe.

3. Clear Visual Affordances

Remember what I said earlier about touchscreen devices relying heavily upon the visual modality? Well, the need for clear visual affordances is amplified by that fact in this scenario. Something has to look interactive in order for touchscreen users to even bother with it–much like when users interact with websites or software. Sure, users can just tap away at items on screen to figure out whether or not those items actually do anything, but I have yet to see users who tap willy-nilly on touchscreens in all my years of testing touchscreen devices. They will more likely than not proceed very cautiously, half-paralyzed with fear that tapping on the touchscreen of their device will cause some unexpected reaction that they cannot recover from. And for those who will tap like crazy on a touchscreen, they will likely become frustrated because they will eventually hit something actionable and not know what exactly it was, and then have to either backtrack or quit the application if the end result was not what they wanted. So at the end of the day, make it clear that users can interact with screen items. Here are some guidelines for that:

  • Do not use transparencies on active screen items
  • Do not overlap inactive items over any portion of active items
  • Use strong color cues to signal an active screen item either through the use of saturated colors, or by adequate difference between button and label colors

4. Easy to Learn Gestural Interactions

This concept has two facets to it. First, keep the interactions simple. The more complex an interaction is to perform successfully, the less likely users are to be successful when trying to perform it. This is really important in the context of gaming because a certain interaction may have a time limit, or users may be monitoring other screen locations while trying to perform the needed interaction. Second, limit the amount of awkward contortions, repetitive or prolonged actions, and forceful actions. I realize that’s a lot of “NO” for one guideline, so let me break it down to make it easier to digest.

An awkward contortion could be asking the user to hit two buttons on one side of the screen in close proximity to one another while hitting a button on the opposite side of the screen when you know full well that they need both hands to hold the device up and see the screen. Repetitive or prolonged actions can be problematic because they will induce muscle fatigue in the user. There’s also a bit of a learning curve here for those new to touchscreen gaming with these types of actions. Console games, for example, have limits on things like range of motion and how that translates to on-screen movement. Pushing a joystick to its limit will usually result in fastest movement of characters. Because touchscreen devices lack that same physical boundary, users may continue moving their finger in one direction thinking that they will continue to move faster until they have actually moved their finger off of the control. Finally, forceful actions can cause short-term pain but long-term damage. (This is simple physics. If you move quickly at a touchscreen, your finger has energy that hits the touchscreen with a certain level of force. And touchscreens, being rigid, do not do a very good job of dispersing that force or absorbing it. So that force will disperse through the next available medium: Your flesh and cartilage. Ow.)

posted by Leslie March 4th, 2010 Featured

What’s “in” a List, Part 1: List Considerations">

What’s “in” a List, Part 1: List Considerations

While reading one of my many cooking magazines, I noticed an article about electronic winelists in some New York City restaurants. This interested me because paper lists can be hard to read. Either the light is too low for reading or the menu is mangled by previous patrons. Electronic devices emit their own light, which goes a long way toward making something readable in low light. And short of dropping or spilling liquid on an electronic device, there’s no dealing with semi-destroyed menus. So I searched for and found several online winelists. Some permitted people to select a wine and reserve it in advance of arriving at the restaurant, such as at ewinebook.com .

While looking over my search results, it occurred to me that it has been a while since I saw a good list. Within the past year I repeatedly user tested lists intended to guide users through important events. Then there were the countless transaction summary pages. In all cases users had trouble finding what they needed. Why? Three reasons: Difficult to understand content, illogical item ordering, and suboptimal structure.

So how does this relate to electronic winelists?

Think about this…On paper we’re limited to the basics: Name, year, winery, and cost. But give someone a backlit screen and it’s suddenly an invitation to create information overload. Sure, now restaurants can make the selection process easier by including images of labels, adding descriptions or recommendations, or checkboxes to mark the bottles patrons are considering. But how do you integrate that and still create a usable list?

A good place to start is remembering the main purpose of a list is the same no matter the display type: Summarize key information in an understandable way. Create concise bits of information and determine a logical presentation order. Then pin down structure. All of the other goodies like images, recommendations, or additional interaction mechanisms are add-ons that can compliment a list nicely when interjected at the appropriate points.

Item Content: Be Clear but Keep It Quick

When viewing a list, readers need to understand what is in front of them without needing anything additional. Therefore, two important qualities are clarity and brevity.

What makes a list item short and sweet depends upon its type. Actionable items within a list should be based around a verb. For example, “Insert tab A into slot B.” The action is clear (insert tab A into something) and the outcome is easy to predict (tab A will be in slot B). However, this same tactic does not hold when creating a list of facts. In this case, some content might require more explanation than others. For wine and drink lists this is an easy task. People want to know what they’re drinking, where it comes from, and how much it will set them back.

Structure: Complexity Relates to Visual Structure

List structure relates directly to a list’s complexity. By complexity I mean, do list items fall into multiple categories or not? Lists without categories should flow in a manner that makes sense. Classifying list items, however, requires you to determine the number of categories and their labels. Once all of that is established, determining hierarchy with good visual cues is next. The common ways of doing this on paper and electronic devices are the same: Indentation, text weight, font size, and color. Some lists also use graphics to denote main categories or special items.

I am sad to say that many list designs I have recently seen fall apart even more at this point. This might happen for a variety of reasons such as restrictions placed by the owner of the list content, or a lack of understanding about how we see lists. For our purposes today, let’s assume the latter.

At a basic level, we see lists as patterns: Lines repeating at a certain frequency. As with anything, if something repeats long enough we become desensitized toward it. So if the list is long enough then the eye becomes fatigued and the reader becomes less likely to see an item. Deviate from the pattern with bolded text or larger font for category labels and fatigue is delayed a bit. And bonus: Deviations also serve as fixation points for attention. So when searching a wine list, if you know you want a Malbec and not a Fume Blanc, then any deviations from the pattern of lines can help you quickly skip over whites and roses to reds.

Now that list design 101 is out of the way, we’ll next look at ewinebook.com to see how well it conforms to these ideas in addition to integrating all of the bells and whistles that make electronic winelists convenient for users.

posted by MakotoKern October 9th, 2009 Featured

Mad Usability: The Good, Bad, and the Ugly">

Mad Usability: The Good, Bad, and the Ugly

Mad Usability was created to showcase the kick ass to the “WTF were they thinking” designs for web, products and anything else we all come across in everyday life.

Read more »

posted by MakotoKern October 9th, 2009 Featured

Contact and Sign up Forms">

Contact and Sign up Forms

This is a Subheadline

Aenean tincidunt pharetra leo. Curabitur euismod sollicitudin elit. Donec faucibus lacus nec sapien. Aliquam ipsum nisi, scelerisque et, commodo nec, consectetur vel, tellus. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui.

  • Sed congue, dui vel tristique mollis, libero elit convallis eros, vitae interdum libero dolor eget leo.
  • Morbi eget sem. Nam mollis. Donec sed velit ut tellus fermentum interdum.
  • Etiam a odio in neque egestas consequat. Pellentesque posuere, orci id interdum.
  • Suspendisse id magna in libero porta faucibus. Vivamus sollicitudin.

Here’s Another One

Mauris vulputate metus eu nisl. Praesent placerat. Mauris vitae erat id ante viverra sodales. Proin tincidunt porta velit. Sed a ligula id felis rutrum placerat. Curabitur et lorem non urna tristique pharetra. Nullam luctus tristique dui.

Etiam egestas scelerisque purus. Ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui. Morbi blandit commodo tellus. Aenean tincidunt pharetra leo. Curabitur euismod sollicitudin elit. Donec faucibus lacus nec sapien. Aliquam ipsum nisi, scelerisque et, commodo nec, consectetur vel, tellus. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui.

Whoa! Ultra Readable Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nibh mi, commodo eu, pellentesque ut, blandit rutrum, ligula. Praesent ultricies urna a urna. Quisque massa. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui. Morbi blandit commodo tellus. Aenean tincidunt pharetra leo. Curabitur euismod sollicitudin elit. Donec faucibus lacus nec sapien. Aliquam ipsum nisi, scelerisque et, commodo nec, consectetur vel, tellus. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui. Morbi blandit commodo tellus.

Vivamus nibh mi, commodo eu, pellentesque ut, blandit rutrum, ligula. Praesent ultricies urna a urna. Quisque massa. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui. Morbi blandit commodo tellus. Aenean tincidunt pharetra leo. Curabitur euismod sollicitudin elit. Donec faucibus lacus nec sapien. Aliquam ipsum nisi, scelerisque et, commodo nec, consectetur vel, tellus. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui. Morbi blandit commodo tellus.

Praesent ultricies urna a urna. Quisque massa. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui. Morbi blandit commodo tellus. Aenean tincidunt pharetra leo. Curabitur euismod sollicitudin elit. These are some more words to lengthen the line.


Powered by Disqus