USER EXPERIENCE GUIDELINES YOU’RE OVERLOOKING

The success of a business will majorly depend on the user experience guidelines that have been set in order to improve its prosperity. This is because the business must ensure the clients are not experiencing difficulty when they try to get access to whichever information or perform a certain function in the company’s interface. If you follow the paramount principles of user experience clearly, you will be sure of an increased satisfaction of users in relation to your company’s interface. 

USER EXPERIENCE GUIDELINES

1. UTILIZE FORM LABELS ABOVE THE FIELD

The perfect place to place a form label in is above the fields, according to a study carried out. Too many people place forms on the left of part of the field, thus, creating a layout of 2 columns. This may seem appealing, but on the other hand, it is difficult to use. The reason behind this is because the form is usually vertically oriented, thus, users fill them from top to bottom. It would be easier to follow the label downwards than is sideways. 

2. Have Clearly Displayed Faces

On a Web page, the user will normally focus on people’s eyes and faces, which should be a great way to attract the attention of many users. Another interesting aspect is that users focus on the direction of the face, that is, where the person on the image is looking at. If the face is looking sideways, the user will also change directions and be less interested. Always consider a clear face image that faces at the user directly to draw more attention.

3. The Design Quality

The quality of the design is a clear sign of the web’s credibility. Like the saying, user will judge the ‘book’ by its ‘cover’. Your Book (website) will determine on how people will be attracted to its cover (design). Aspects like the typography, layout, color, consistency and style will determine how the users will notice and judge your website. The images you display will also determine majorly. Ensure everything, including the images are relevant to your audience. 

4. Avoid too Much Scrolling

Most of the users do not like too much scrolling. Studies show that around 70% of the visitors will not scroll down your page, all they do is view the content in the visible part on the screen. For that reason, always keep your principal content on the upper fold of your page. Nevertheless, don’t jut pile all the content in the above page fold because over-crowding content can also keep users bored. The name of the website and what will benefit the users should be placed on the main page and upper fold.

5. Let Your Links Be Blue

It’s good to be unique when you are designing your business website, nevertheless, it is important to follow the user experience guidelines. This is because people tend to follow the same process they used in another website to get to a certain destination. They also expect that something should be default, things like link colors, the website’s logo location and others. The link color should be darker or lighter than the background color. They should also be different from the rest of the text. Research shows that a blue link is easier to view and use than other colors. This is because many people are used to blue links.

6. The Best Search Box Should be 27 Characters wide

Some people tend to use shorter search boxes, which only display a section of a long inputted text in the box. It is recommended that you employ a search box of 27 characters, which according to the study, contained around 90% of the searched queries. You can set the width using Ms and not just points and pixels. A wider search box is better than a shorter one and has many advantages.

7. White Space Enhances More Understanding

A lot of web designers understand how important white space is, that is the space between pictures, paragraphs or buttons in the page. The space between items shows the relationship between the two and the items can be grouped by either increasing or reducing the spaces. The white space also enhances the readability of content, therefore, utilize them well. 

8. The User Testing Should Be Short Enough

A study showed that best number of tests that users carry out should be short enough, to increase the feedback positivity. If the test is extra detailed, there are chances that most of your website problems will be indicated in the tests. Always stick to none or just a single test for your users.

9. An Educational Product Page Is An Added Advantage

If you have a product page website, many people will surf through them, nevertheless, there are some sites that lack enough information on the products being sold. This is bad since the information on the products will lure customers more than just a product with prices and contact information. The information should also be easy to read and educational enough.

10. Avoid Too Much Advertising

Evidently, many people hate destructions and some are just not attracted to that extra flashy stuff. If you have a website that is flocked with ads of all sorts of banners and flash images, it will actually chase away your users. Users also tend to ignore anything that looks like an ad, therefore, as you design your website, consider the user viewpoint. 

Conclusion

Generally, as you are trying to design your website to be captivating enough, always remember that it is not a photograph that you will hang on your wall at home or a profile picture that you wouldn’t mind whom it pleases. A web page should be captivating and in addition to that, it should focus on the user. If you put too much stuff, it may be difficult to follow, if you put too little, it may be so cheap and empty, always be informative in whatever you post in your site. These user experience guidelines should help you come up with an eye-catching website that will satisfy your user and make them always want to visit again for another time.

Building User Confidence with User Experience (UX) Design

Increasing user confidence online is a constant challenge that both website owners and entrepreneurs face. With the prevalence of scams and frauds in the online community, creating an environment where users feel comfortable interacting, using and buying from a website is essential. User Experience (UX) design is an essential step towards building user confidence and increasing both sales and your user base. (Lead image source: Intel Free Press)

Make it Easy

Website owners have less time than ever to impress and entice potential customers to learn more about their site. While some insist that tech savvy users require different interfaces than casual Internet users, a frustrating design is still a frustrating design. Users of varying technical abilities want a system that works smoothly and seamlessly.
Creating a site that is intuitive for new users but complex enough to engage experienced users is a difficult tightrope to walk. Facebook is a textbook example of how a user friendly website can become unfriendly and unresponsive to new users through continual updates. What was once a very easy to navigate site is now covered in strange icons, making it nearly impossible to navigate paths to gather information. On the other hand, sites like Reddit and Gmail have continually worked to gather new users while increasing the usability and utility of the site for experienced users. Rather than making the sites more complicated to engage seasoned users, both sites expanded on the base options to make their sites more immersive instead. Users want to feel engaged and confident in site navigation, regardless of experience.

Using user experience to build user confidence doesn’t just encourage users to become frequent visitors and customers of the interface, it also gives them the confidence to recommend the system to others. Regardless of the features, a site that is difficult to use will never become the go-to recommendation for anyone other than hardcore users. Use user experience design to ensure both seasoned and new users feel comfortable in their ability to gather information and use the site properly.

Provide Clear Information

Internet users are warier than ever about disclosing personal information and data. With widespread data breaches in personal email accounts and state governments alike, being transparent with user information and accessibility to that information is imperative for building user trust. Luckily for us, finding a balance between User Experience and Security is possible.

Providing a disclosure policy on a website that is easy to find provides users with a degree of trust. Rather than digging through fine print or scouring the site’s policies, this transparency and openness with the distribution (or lack thereof) of data contributes to user confidence in both the developer and the site. Sites like Zappos even go so far as to disclose their privacy policy and safeguards against consumer identity theft on a separate ‘Shop with Confidence’ page to assure customers of their online safety before they put a single item in their cart. Clear information boosts the credibility of websites – something which is essential especially in e-commerce.

Prioritize User Testing

It’s said that the closer you are to a project, the harder it is to view it objectively. UX is no different. User confidence is reliant on a working system. Often, users don’t blame the system for their troubles, they blame themselves. A poorly executed error message will have users reassessing their own use rather than blaming coding errors. These users will become frustrated and ultimately leave the site entirely, never realizing a quick email or call to the company could yield the desired results.

Even more damaging is when users associate a site or interface with computer crashes or consistent errors. While small hiccups in programming may seem innocuous, they degrade any trust or respectability in a site to a regular online user, losing sales and users. Consistent error messages or an inability to use the features of a site send a red flag to users. This alerts them that the developers didn’t care enough to present a completed project, creating a breach of trust when disclosing new data.

User testing is by far the best and easiest way to ensure users are getting a positive experience. While a developer may never think to enter a symbol into a search function, a user with limited online experience may accidentally do just that, alerting developers to a flaw in the usability. This testing ensures that users of all abilities can successfully navigate the site.

Pay Attention to the Details

Often, high arching goals like creating a smooth interface or providing clear sight lines cause developers to lose sight of the basics. No matter how quickly a site loads or how nicely it is laid out, a site riddled with spelling errors or broken buttons will stand out for all the wrong reasons. Simple spelling mistakes drastically undermine user confidence in the business, product or site and lead to a decrease in sales and use. According to eConsultancy, up to 18% of revenue can be put at risk due to website errors. This impact on the bottom line makes attention to detail a first priority when developing a positive user experience.

While user testing may unearth some missed details, a full appraisal of a site and its content is important before going live. Whether it’s hiring a full-time editor or a part-time auditor for content error, catching and preventing these nuanced mistakes that crush user confidence is pivotal. Large online retailers may be able to absorb or overcome misspelled descriptions or broken links, but a smaller website simply doesn’t have the clout or proven track record to risk disclosing personal information. Double and triple checking content and site usability is a simple way to increase user confidence, no redesign necessary.

In Conclusion

UX doesn’t just create a pretty way for users to see and interact with a website. It provides an invaluable service for businesses by providing an attractive and respectable platform that encourages use, sells product sand gathers customer information. Creating a user experience bent towards improving user confidence in the brand, business or website enhances the user experience while strengthening the business it represents.

2014 MOBILE UX DESIGN TRENDS: EMBRACING MINIMAL

For the past few years we’ve experienced a steady lean toward minimalist design of digital space. As new technologies, such as higher screen resolutions and faster networks, influence the aesthetics of digital surface, our decisions in choosing the right approach for designing mobile interfaces will further shape user interactions and behaviors.

Living the flat world

Flat design is based on the principal of: “focusing on simplicity and clarity to ease functionality and emphasize usability”. Popularity of flat user interfaces (UI) emerged recently with Windows metro style and iOS 7. In a series of minimalist trends that rose during the past couple of years, 2014 seems to be the year that Flat UI will mature and become even more ubiquitous.

The basic influence of this approach on the graphical user interface (GUI) was the departure from skeuomorphism and elimination of gradients, shadows, textures, reflections and beveled edges. With all these limitations, the question is raised: how is dimension or depth implemented in flat UI design?

The answer goes back to the original principal of Flat design: embracing the strength of digital interface. In Flat design, depth is simulated with the combination of two main qualities:

1. Interactions such as parallax scrolling and behavior-learning responses
2. Visual clarity such as contrast in monochromatic themes, minimal use of colors, big font and less text, use of spaces and blocks instead of lines, and blurring backgrounds

Flat Icons (TriplAgent) are quick to design, scale well and blend with any visual design theme.

Sherpa, a personal assistant app that learns user habits, behaviors, and provides information that is of interest to the user.

Monochromatic or minimal use of colors (Univit) along with use of blocks and spaces instead of lines make the tap zones very clear to the user while providing a good look.

Blurred background used to set context and draws the user’s attention to focused content.

Making BIG impressions

Today, capturing a moment is a tap away. Quality photos are everywhere and taste in aesthetics is changed to own the accessible, resulting in more pleasing images on apps and mobile websites.

Higher-screen resolutions brought the affordance to go big on fonts and images. With new technologies designers are able to play more with contrast and crisp visual effects.

Last year we saw the design of websites gravitate towards single-page websites, full-screen images, and HTML video streams on landing pages, similar to Nike’s Jordan website. These designs aim to make a big first impression upon website arrival. Carrying over the same effects to mobile platforms is challenging, but doing so becomes imperative as the use of responsive design becomes more common. As a result, this year we will experience a smooth translation of same effects on mobile platforms where we’ll see more of:

Full-screen quality photo backgrounds
Big fonts as well as combinations of font sizes and font types
Single-page apps and sites that focus most user interaction on one screen
A mobile-first design sensibility (more on mobile-first & responsive design)

Big fonts and font combinations

Full screen photos (Bloom*) with condensed navigation menu

Single Pages (Nike Training Club)

Designing for short attention spans

Aside from games and other long engagement programs, mobile applications are mostly used for performing a series of quick and straightforward tasks, similar to the Move app that tracks daily activity. That pushes the interface to:

1. Learn user behavior, predict and suggest the relevant content when it is needed and where it is appropriate.
2. Communicate the content visually with hierarchy so that the user spends the least amount of time possible in locating and performing a task.
A good example of communicating with a visual hierarchy is the concept of cards, which was introduced last year by Google Now. Even though the concept had been used before with window “live tiles” or in print magazines’ feature stories, popular apps like Evernote or Pinterest use a similar concept today. Cards design enables apps to provide separate, well-designed snippets of information or interactions for their users. Big photos catch their attention, while brief texts confirm that the interaction would interest the users and tapping the cards would engage them with more detail. Scanning content feels more relaxed as it appears more intuitive and in line with user behavior as opposed to purposeful searching of web content.

Cards design (Evernote)

Cards design (Google Now)

The 2014 design aesthetic is about embracing minimalism beyond the surface aspect of user interface. It also involves designing for user interactions and optimizing those interactions visually and behaviorally to emphasize the functionality of the digital space in mobile platforms.

As brands grow their mobile presence, the bar is raised for both aesthetics presentation and user experience of the mobile interface. It is important for businesses to evolve the mobile experience to meet expectations and crucial to keep an eye on how these trends develop.

Color Blindness and Web site Design

Introduction

Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish (Wikipedia). Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females. There are two major types of color blindness: those who have difficulty between red and green, and those who have difficulty distinguishing between blue and yellow.

Benefits of Color Friendly Web sites

Aside from making a Web site accessible to visitors who are color blind, there are other benefits to making the site color friendly. These include:

• Accessible Web sites are more likely to be ranked well with the search engines.
• By designing colorblind accessible Web sites, you are also targeting PDAs, 3G phones and similar technological devices used for web access.
• Your Web site is seen as more professional if it doesn’t exclude the impaired or disabled.

Color blindness could involve up to 1 in 20 visitors to your Web site. For this group, you run the risk of having a Web site that the text is barely legible and the images unrecognizable.

The Challenge

The challenge of designing for color blindness is because it is hard to determine what color blind users see and how that is different from what the average user sees.

And the difference between the different types of color blindness just adds an additional layer of complexity.

Research models have attempted to predict or calculate how colors are perceived by color-blind users (Wolfmaier, 1999). These models make a good attempt, but it is not possible to predict what a color blind users sees with 100% accuracy.

Prioritizing the Web site

There are many facets to designing a user-friendly Web site. It is impossible to create a site that is friendly for all and meets the needs of every single visitor. A good strategy is to prioritize the content. The higher the content is in importance means it is more essential to make it color-blind safe.

Any links or buttons on the site that are essential in aiding the user to accomplish their tasks would fall high on the essential list. The standard rule: any content that the user may look at for more than two seconds should be made clearly visible and have a high contrast ratio.

Content areas should be monochromatic with the font color and background at the opposite ends of the color saturation poles (i.e., black text on a white background). Elements of the navigation menus, headers and sub-headers can be given more artistic treatments because users seldom stare at these elements for long periods of time. Navigation should stand out from the content and visitors should be able to quickly differentiate between the two.

Colors that Work the Best

Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example). A good practice may be to create the site in grey scale colors because elements should never rely solely on color.

Each element should have more than one cue. Images, links, buttons, and other similar elements should be enhanced with an image, shape, positioning or text. For example, a link should be highlighted by color as well as underlined. Take away the color treatment and the underline will let visitors with color blindness know that it is a link.

Image maps also pose a problem for color blind users. Image maps have clickable areas that are often delineated by color. Options are to add underlined text to the clickable areas or a black outline around the images (e.g., outline around a state on a map).

It is considered a best practice to use bright colors. People who have color deficiencies can see all the colors but they have a problem differentiating between them so using bright, bold colors helps.

Other issues to consider are the contrast between colors and the background. People with color blindness are less sensitive to colors on either end of the spectrum. For example, reds and blues often appear to be darker to the color blind user.

Why Bother

Some will argue about why sites should be designed with such a small population in mind or to meet the needs of a minority. The are several reasons: 1) a site should always strive to be user-friendly for all audiences 2) there are standards that keep sites accountable to people with disabilities and 3) well-designed sites don’t require changes to make the accessible.

Improving the site for color-blind individuals has an affect on other populations as well. Those with color-blindness are not the only visually impaired users and adding all visually impaired greatly increases this population. The growing senior population often has the same difficulties with visual impairments (e.g., differentiating text and site elements).

References

Brettel, H., Vienot, F. & Mollon, J.D. (1997). Computerized simulation of color appearance for dichormats. Journal of the Optical Society of American A, 14, 10. 2647-2655.

Meyer, G.W. & Greenberg, D.P. (1988). Colour defective vision and computer graphics displays. IEEE Computer Graphics and Applications, 8. 5, 28-40.

Wolfmaier, Thomas G. (1999). Designing for the Color-Challenged: A Challenge. Internetworking.

Newman, Chuck (2000). Considering the Color-Blind. Web Techniques.

Parise, Mario (2005). Color Theory for the Color-Blind. Digital Web Magazine.

Karagol-Ayan, Burcu (2001). Color Vision Confusion. Universal Usability in Practice.

How to Plan a Content Heavy Site

A major project can be intimidating. The first time you take one on, it may even be terrifying. But with a little planning, you will succeed with flying colors.

In this article, we’re going to walk through a few of those steps to successful project management.

Create a Project Workflow

This is a critical first step.A project needs clear planning from the start. Without a clearly defined workflow, your project will quickly become a muddled mess. Even using a management tool like Basecamp requires first creating a workflow definition. Ask yourself the following questions:

1. Who will be responsible for the site content?
2. Where is it being saved?
3. What format?
4. How should it be named?
5. How are you going to track versions?
6. What members of your team are responsible for what tasks?

These are a crucial considerations in the beginning of any project, and if you skip them now it will be very difficult to work with large amounts of data later.

Organize Files Logically

Once you have decided on a workflow, it’s time to get your assets in order. Make sure that there is a clear direction of where your files should be going, and what they are named. This is an important and logical second step in order to keep files organized in future stages.

A Sample Folder Structure

Setting up your folders is always a daunting task (there is always someone who does it better) but you can always learn something from trouble you run into. I have come up with a file structure that seems to work for almost all projects that I work on:

The “Client Files” folder is just what you would expect. It contains all files that the client has submitted to us for use in the project. Typically clients provide content, product images, and logos. I sub-divide the “Images” and “Logos” folders because we edit the files after we receive them, but we do not typically edit the text.

Other Considerations

If you are saving files to something such as Basecamp, documents should be a Word document, placed into a specific category (e.g. “Site Content”) for filing, and named after the page it belongs on.

If you’re using an FTP server, naming the files is a little more crucial. Something similar to Site > Text > HomePage_3October.doc contains a date so that you can make sure that you are using a current version. This allows the content creator to go back to specify a version easily.

Additionally, if you are building an e-commerce site, requesting data from a client in a spreadsheet might just come in handy. The columns you end up with will be unique to your project, but they will at the very least be: Product ID, Product Name, Description, Price, Options, Dimensions, Image File Name. Having this reference will be invaluable as you are spending that day inputting the data into your site.

Create a Site Map

How are pages going to relate to each other? If this is a really large site, how are the categories going to relate to each other and then pages within a category going to relate (relationships only need to be defined in one category if all categories are going to contain similar relationships).

There needs to be a site overview listing all categories and subcategories. You can go back into your main folders and create sub-folders for your categories at this point. By having a graphical or outlined site plan, you and the client will have a better understanding of how the site is going to progress.

Define Page Content

Now that you know exactly what the pages are and how they relate, you can begin to define the page types.

It’s easy to undervalue this step, but it is important not to. It lets you refine the site plan and formulate an effective ask for data and content.

Some of the main points things you should to consider at this point:

1. What types of pages are you going to have?
2. What kind of forms are needed, and where does the information go?
3. Is there a database in play?

From these three generalized points, you can build a whole checklist of further items to review (e.g. Setting up form email accounts, legal pages, etc.)

Inventory Existing Content

What data do you have available or finished? Once you’ve completed the previous sections, it’s a good idea to inventory existing content. Verify that you have the pictures of products or people that you requested, that all of the descriptions exist and that they follow proper format.

Something missing? Go back and check your sitemap and project folders. Making sure you have all the data that you need tucked away neatly into proper folders will prevent headaches and holdups when trying to finish up the project.

Make a Timetable

Make a calendar. Put deadlines on it. This will help you focus and keep the project on track. Managing a large project can be a bit like training a cat — seemingly impossible for an untrained person, but with careful planning and persistence, it will be successful.

7 Common Design Mistakes That Clients Love (and how to fight back)

From flash intros, to logo theft, to information overload, clients often ask a design team to do a lot of stuff that’s just plain wrong. Here are 7 of the most common mistakes clients might ask you to make -- and how to talk some sense into them.


1. Scrimping on photography

The problem: For some reason, lots of clients will happily pay for hours and hours of a designer's time, printing costs, etc., etc., but they'll freak out when it comes time to pay for photography. Either they'll want to avoid using it altogether, or they'll send you a bunch of lame images from their marketing department. Of course, not every project needs photos. But when you know they would make a big difference to the quality and effectiveness of the design, it's frustrating to be told no.
bad-stock-photography


How to fight back: Tug at their heartstrings so they'll open the purse strings.
Good photography has the ability to provoke an emotional reaction. Use that to your advantage. Whenever possible, avoid using weak place-holder images in your mock-ups. Before you present any mock, even an early iteration, take some time to find great imagery that helps communicate their brand and your design. And don't be afraid to draw on some expert advice on the subject. When David Ogilvy wrote his classic book Ogilvy On Advertising, one of the key lessons was the importance of a good image for memorable design.


2. Wanting a Flash intro, despite it being 2009

The problem: Seriously people, do we really still have to talk about these? They're just a bad idea. People are impatient, and if they're coming to your client's website, it's because they want something. What they don't want is to see a bunch of vector graphics swooshing around pointlessly.
flash-intro

How to fight back: Drop some stats on them.
The killer number? Fully 25% of site visitors will immediately leave when they see a Flash intro. And that's even if there's a "skip intro" button.


3. Too much information

The problem: The average client seems to have never heard the old adage: less is more. No matter what you're designing, they'll want to add more copy, links, calls-to-action, logos, headers, footers, global nav elements and 1-800 numbers. Part of the problem is that they think that if it's there, their customers will read it. And sometimes part of the problem is that they're balancing the needs of fifteen different divisions within their company, who all want some of that prime screen real-estate on whatever you're designing.
messy-website


How to fight back: Ask them what they want the design to accomplish, not what it should contain. No matter what you're designing, it should have a purpose. Whether it's a poster, product packaging or a corporate homepage, the design should serve to accomplish something for the person who will ultimately be viewing it. Once you're discussing what a viewer needs from the design (rather than what the company wants it to contain) you're on the right track to reducing the amount of information to only that which is necessary.

The "Long Neck Theory" by Gerry McGovern states that every website has a very short list of "killer tasks" that visitors to the site want to accomplish. His testing indicates that just 5% of content, which serve those killer tasks, is used by at least 25% of visitors to a site. And past that key 5%, the vast majority of the rest of the content is only useful to a tiny percentage of people. Which means that not every little bit of content on a site needs prominent placement.

If you're designing for the web, hopefully you'll have an interaction/information architect on your team to help fight this battle. But if not, a little knowledge of some basic usability guidelines can go a long way. If you want to read a very smart and easy to read introduction to the subject, check out the book "Don't Make Me Think" by Steve Krug.


4. Using white text on a black background (for the web)

The problem: Okay, admittedly this is a controversial one. There are many designers who love this aesthetically, and feel that it provides the right amount of contrast to make it very readable. And if you're designing for print, it can be effective, especially if it's used sparingly. However, if you're designing for the web, and a client asks you to do it, just say no. And the reason has nothing to do with the way it looks. There's a significant percentage of people who find it very uncomfortable viewing a page with that color scheme. And they will leave the page, never to return. There isn't much agreement on how high that percentage is...but if you're losing any traffic just because of the way text displays, that's a problem.
white-on-black-design



How to fight back: Bust out the usability hammer.
Yes, many designers feel that sticking too close to usability guidelines can lead to stale, predictable design. But those same guidelines can be a good weapon when you want to talk a client out of something. Generally, usability guidelines indicate that to get the most readable level of contrast, you're best off going with #333333 or #444444 on a white background, as design researcher Todd Warfel explains in his post "Color Theory in the Digital World".

You may not necessarily agree with that idea (and you can judge by yourself, cause what you're reading right now is #333333 on white), but you can still use it to help convince a client to ditch the white on black.


5. Wanting the logo bigger

The problem: Okay, this is a bit of a cliché joke among designers, but it's cliché for a reason. Almost anyone working directly with clients has had to deal with this design mistake at some point in their career. A big part of the problem? When they look at a design mock-up, many clients have trouble imagining themselves as a customer. They focus on what's important to them – the logo and other branding elements. And so it's only natural they want them to be receive more emphasis, at the expense of all the other really important stuff their customers want, and that you've spent hours and hours putting together in an elegant and effective design.
logo-bigger


How to fight back: Nike to the rescue.
There are lots of arguments you can make about why the different elements of your design are the size they are, and are placed where they are. And hopefully you'll be able to speak to your design in a way that's so convincing, the client immediately agrees that their idea to make the logo bigger isn't a great one. You could even mention usability guru Jakob Nielsen's assertion that: "The most critical page elements should be visible above the fold" (Guideline #66 on his list of "113 Design Guidelines for Homepage Usability") and therefore an excessively large logo is taking very valuable real estate away from things that site visitors are actually looking for.

But, if all that doesn't work, then talk to your client about the Nike swoosh. Specifically, how it's one of the best, most recognizable, most remembered logos in history. Then show that client any Nike ad, or bring up Nike.com. And make a show of pointing out that little, tiny, logo waaaay off in the corner of the page. It's not scientific, but it is a good anecdotal case study that might help convince them that you're not crazy for keeping their logo nice and tidy and small medium-sized.


6. Ripping off someone else's logo

The problem: You've been asked to design a logo. Great, you get to test your creativity as you struggle to come up with something cool within the extreme restraints of logo design. But there's one catch – the client shows you another logo (maybe it's for a competitor, maybe it's just for their favorite brand of baby food) and says "make it look kinda like this."
logo-ripoff



How to fight back: Play to their ego
On a purely ethical level, ripping off a logo is not cool. But good luck having a civil conversation with a client, where you convince him or her to re-assess their ethical code. So the best way to fight back here is to convince them that their brand's identity needs to be unique because, after all, their company is better than the competition, or at least should aim to be.

If they skew their own logo and branding too close to that of another company, they risk consumer confusion. And while a bit of consumer confusion may actually be appealing to a client who's own company is the new kid on the block, if they ever hope to be top dog, they'll benefit greatly from their own strong brand identity. And that all starts with a unique logo.

More logo-ripping at FloatingBanana and information on How NOT to Design a Logo over at Webdesign Depot ;-)


7. Wanting a terrible font

The problem: Fonts matter. As a designer, you know that better than anyone. But for people who don't really spend much time thinking about them, fonts can be mysterious and confusing. And that can lead to truly terrible design direction from clients who know just enough about fonts to care which one you choose, but not enough to actually know what works.
comic-sans



How to fight back: Tap into the research
Because typography's been around for so damn long, a LOT of research has gone into the use and efficacy of fonts. Of course, in the age of digital, some of that work is obsolete. But font usage continues to inspire massive amounts of studies and research. So much that you can look online and quickly find a half dozen references to why exactly it's a terrible idea to use, say, Comic Sans.

Good UI Design: Make It Easy, Show Me You Care

When researching FuseCal this morning, one of the things that made it so appealing to try was the fact that you could just enter in a URL and see the service in action right away. No sign-up forms, no logins. This got us thinking about UI design as it applies to today's web services. Lately, it seems that less and less services are using sign-up forms...at least, they aren't requiring you to sign up right away in order to try them out. Instead, the trend seems to be to let you jump right in and get to work. This is definitely a good move, in terms of usability of the site, and it's not the only UI trend we've noticed lately.



Trend #1: Try It Now!

An excerpt from an upcoming book by Luke Wroblewski, "Web Form Design: Filling in the Blanks," posted on A List Apart helps to point out the issue with sign-up forms on the web. When you're recommended a new web service to check out, Luke writes "you arrive eager to dive in and start engaging and what’s the first thing that greets you? A form. We can do better."

Instead of forcing users through a dreadful sign-up process when really they just wanted to take a look, he promotes the idea of "gradual engagement." After you play around with a web service and get an idea about what it does, you can then choose to take the path to complete your profile in order to create an account, save your work, share the results of your creation, etc.

Luke uses a few examples to make his point: one, Geni, an online family tree creation tool lets users make a family tree as soon as they visit the web site. Of course, as you fill out your name, you also enter in your email, so while you're busy building your tree, you're also being sent an email from the service, reminding you of your account details if you ever want to return to work on your tree. However, this vague "did I just create an account?" design may have worked for Geni, who generated 5 million profiles in 5 months, we would argue that it should be more obvious whether you are creating an account or not.

Geni's "Sign Up" Process

Another example of gradual engagement came from TripIt, a service which lets you plan your trips. The interesting thing about TripIt is that the service also ditches the sign-up form for a more interesting option: you just email plans@tripit.com when your travel plans, be them airline confirmation email, hotel confirmation emails, whatever. TripIt extracts your name and email from the form instead of forcing you to enter these details yourself.

Personally, I recall Twiddla (our coverage) an online whiteboarding service, as implementing the "try-before-you-buy" option really well. Upon visiting the Twiddla homepage, a big button "Try it now in the sandbox," lets you test out the service along with other users in a public sandbox. This way, you can not only try it out for yourself, but you also might see someone else testing a feature you would have otherwise missed. You could also just click "Start a New Meeting" from the homepage and instantly use the Twiddla app with the others who you invite via email, no signing up required.

Twiddla's Buttons


Trend #2: We Really Care

Another trend spotted in the wild is UI design that shows customers that the company cares about them. Take Samatha Warren's experience with Wufoo, an app that helps you design and build online forms. After finding herself in need of tech support, she noticed an odd form field on the Support Request page: "Emotional State."

The drop-down included choices like excited, confused, worried, upset, panicked, and angry. Samantha chose the feeling that best described her mood ("worried", by the way), and then made a startling discovery:

"As I made my selection and moved the curser to hit the submit button a feeling washed over me that was unlike anything I had ever felt with a webservice online. I felt like they cared. I felt confident that my problem would be solved. I felt like I was contacting PEOPLE who have beating hearts, and families, who had felt worried about their missing contact e-mails too. How very humane of them!"

WuFoo's Support Form

Some say this is cheesy, others find it annoying, but WuFoo isn't the only service to utilize this idea.

Xobni (our coverage), the "social network in your inbox," also asks for user feedback by asking you how you feel. They built the "Are You Happy?" box. From a Xobni employee's blog, Gabor Cselle describes why:

Instead of a popup, we add a little box on the bottom of the sidebar every couple of weeks and ask: "Are you happy?" There are two buttons, Yes and No, and an optional comment field. This is the most lightweight method of collecting user feedback. Note that:

1. We're not popping up an annoying window.
2. We ask a simple question.
3. There are only two options – "yes" and "no" - and no Send button.

Xobni's Emotional Feedback Pop-Up

While an argument can be made that opting out of the happiness check should be more readily available, apparently most of their users don't seem to mind. The feedback is 90% "Yes."

A more obvious place to find "emotional feedback" form fields is on people-powered customer service site, GetSatisfaction.com, (which, by the way, also forgoes a long sign up process by allowing you to fill in a basic form - name, email, CAPTCHA, with further profile information optional.)

Company feedback, ideas, and questions can tagged with a smiley/frowny face depicting how you feel. After you select the face, a box pops up to allow you to pick out a related word like "happy," "anxious," "indifferent," or "unsure."

GetSatisfaction's Emotional Feedback

While emotional feedback doesn't work for everyone - some find it patronizing, especially when they're reporting a critical issue - an opt-in emotional feedback box could at least gather information about requests/complaints and help a company analyze and prioritize their incoming feedback.


Conclusion

Gradual engagement and emotional feedback are only two of many UI trends seen lately, but two that stand out as they seem to be ramping up in terms of usage by web companies. Hopefully, more companies will take note that there are a number ways to generate accounts for their service besides the traditional, boring sign-up form, or at least start supporting OpenID as an alternative.

As for emotional feedback? It's a more risky choice since some users detest it, but done right, it could bring a new level of information about to product feedback while making users feel valued by the company.

Do you have any examples of either of these trends that you want to share? And...how does that make you feel?

Windows UI - The World Of Never-Ending Choices

Looking back at the years when Windows dominated our lives one can hardly believe what we put up with. These interfaces were massive and overwhelming. Each application was full of screens with huge numbers of options and settings.

Every imaginable choice was thrown at users at once and it was up to the poor user to figure out what to do. To cram more information onto the screen, the interfaces of that era used tabs. At some point Microsoft invented the ultimate UI element - a tab with a scroll button in the end which allowed the user to page through hidden tabs.

Another philosophy of the old UI approach was that the user wants to see all information all the time. Instead of building UIs that responded to the way that people actually interacted with the tool, the user interface opened up all possible choices at all times. Naturally, this is completely overwhelming and confusing to people.

The only way to cope with complexity was to introduce a standard set of widgets, such as tables, combo boxes, check boxes, etc., so that users at least had some familiarity with UIs from program to program. But on top of that, there was a myth spread that users were stupid and would not be able to understand a non-standard UI.

The myth was supported by the fact that a lot of people do not respond well to sophisticated visualizations, like graphs, heat maps, or treemaps. While this is true, it doesn't mean that people can not figure out new user interfaces. The proof comes from Apple, which continuously innovates with new UIs for its software products. Also, recent social web applications have made a strong case for simpler, contextual user interfaces.

UI Design Principles

Let’s start with the fundamentals of user interface design. Constantine and Lockwood describe a collection of principles for improving the quality of your user interface design. These principles are

1. The structure principle : Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.


2. The simplicity principle : Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.


3. The visibility principle : Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.


4. The feedback principle : Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.


5. The tolerance principle : Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.


6. The reuse principle : Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

Good User Interface Design Tips

• Always use cute icons, buttons, and graphics. Everyone loves big red hearts, pink bunnies, and yellow smily faces.

• Don't be afraid to experiment with colors!

• Your application should play fun sounds while operating to keep the users entertained.

• Never, ever, under any circumstance use the OS-native graphical controls or widgets. Users get bored of the same old buttons, text boxes, and stuff.

• When possible, disable window management and use unusual, oddly placed graphics for the windowing functions such as the window close option.

• When writing your own controls or widgets, make absolutely sure they look and feel nothing like the OS-native widgets or anything else the user might expect. Otherwise you might accidentally make the user think that your application is actually designed for their OS.

• Use your own creative ideas on how a "save as" dialog should look and work. Built in ones are always too limiting.

• It is important that the user should never be able to tell the difference between a checked and unchecked check box or option box.

• Always use obscure or poorly drawn graphics for your tool bar buttons, and never put text on them.

• Avoid including a preferences or options dialog. Instead, let the user use the standard OS provided text editor or an editor of their choosing to edit text configuration files. .

• Users need time to think about what they are doing and get coffee. Your application should always take at least 5 minutes to load even on the fastest available computer.

• Make sure an accidental double-click on a single-click item does something really nasty or unexpected.

• Tool tips are the perfect way to display critical information.

• To get the most screen space, force your application to always run maximized.

• Always make the default positions of floating properties windows cover something important.

• Use the most exotic fonts you can find.

• Your application's user interface should be flexible and customizable to the point where if the user accidentally sneezes on the mouse or keyboard they will have to spend the next half an hour setting things back.

• Let a 5-year old draw your graphics, including your corporate logo.

• File browsing dialogs are not needed, users can easily remember and type in long file paths.

• Design your application so it requires the user to set their tiny monitor to 10512*7430.

• Always crash at a critical step and then display a fake apology to the user.

• It is a mistake to make use of application hooks in the native desktop environment such as new file templates, file associations, or program menu icons.

• The exception to the above is placing icons in the system tray. Place as many icons as you can in the system tray and make sure that the user can not remove them.

• If your program implements keyboard shortcuts be original and make them completely different from any other applications.

• Rent extra UI space in your application out for advertising. Advertising benefits the users and your wallet.

• Never underestimate the power of nudity.

• Don't forget to embed a hidden video game as an "easter egg".

Efficacy of User Interface Design

Many technological innovations rely upon User Interface Design to elevate their technical complexity to a usable product. Technology alone may not win user acceptance and subsequent marketability. The User Experience, or how the user experiences the end product, is the key to acceptance. And that is where User Interface Design enters the design process. While product engineers focus on the technology, usability specialists focus on the user interface. For greatest efficiency and cost effectiveness, this working relationship should be maintained from the start of a project to its rollout.

When applied to computer software, User Interface Design is also known as Human-Computer Interaction or HCI. While people often think of Interface Design in terms of computers, it also refers to many products where the user interacts with controls or displays. Military aircraft, vehicles, airports, audio equipment, and computer peripherals, are a few products that extensively apply User Interface Design.

Optimized User Interface Design requires a systematic approach to the design process. But, to ensure optimum performance, Usability Testing is required. This empirical testing permits naïve users to provide data about what does work as anticipated and what does not work. Only after the resulting repairs are made can a product be deemed to have a user optimized interface.

The importance of good User Interface Design can be the difference between product acceptance and rejection in the marketplace. If end-users feel it is not easy to learn, not easy to use, or too cumbersome, an otherwise excellent product could fail. Good User Interface Design can make a product easy to understand and use, which results in greater user acceptance.

Web Style Guide

User-centered design
Graphic user interfaces were designed to give people control over their personal computers. Users now expect a level of design sophistication from all graphic interfaces, including Web pages. The goal is to provide for the needs of all your potential users, adapting Web technology to their expectations and never requiring readers to conform to an interface that places unnecessary obstacles in their paths.
This is where your research on the needs and demographics of the target audience is crucial. It's impossible to design for an unknown person whose needs you don't understand. Create sample scenarios with different types of users seeking information from your site. Would an experienced user seeking a specific piece of information be helped or hindered by your home page design? Would a casual reader be intimidated by a complex menu scheme? Testing your designs and getting feedback from a variety of users is the best way to see whether your design ideas are giving them what they want from your site.

Clear navigation aids
Most user interactions with Web pages involve navigating hypertext links between documents. The main interface problem in Web sites is the lack of a sense of where you are within the local organization of information:
Clear, consistent icons, graphic identity schemes, and graphic or text-based overview and summary screens can give the user confidence that they can find what they are looking for without wasting time.
Users should always be able to return easily to your home page and to other major navigation points in the site. These basic links should be present and in consistent locations on every page. Graphic buttons will provide basic navigation links and create a graphic identity that tells users they are within the site domain.
The button bar is efficient (offering multiple choices in a small space) and predictable (it is always there, at the top of every page), and it provides a consistent graphic identity throughout the site.

No dead-end pages
Web pages often appear with no preamble: readers can make or follow links directly to subsection pages buried deep in the hierarchy of Web sites. They may never see your home page or other introductory site information. If your subsection pages do not contain links to the home page or to local menu pages, the reader will be locked out from the rest of the
Make sure all pages in your site have at minimum a link back to the main "home" page or, better yet, a home page link along with links to the other sections of the site.

Bandwidth and interaction
Users will not tolerate long delays. Research has shown that for most computing tasks the threshold of frustration is about ten seconds. Web page designs that are not well "tuned" to the network access speed of typical users will only frustrate them. If your users are primarily general public browsers "surfing" the Web via dial-up modem connections, it is foolish to put huge bitmap graphics on your pages — the average modem user will not be patient enough to wait while your graphics download over the phone line. If, however, you are building a university or corporate intranet site where most users will access the Web server at Ethernet speeds or better, you can be much more ambitious in the use of graphics and multimedia. Many home computer users can now use high-speed DSL (digital subscriber line) or cable modems to access the Web. However, industry observers expect that it will be at least another five years before Web designers can count on most home users having access to high-speed Web connections. In general, be conservative with Web graphics. Even users with high-speed connections appreciate a fast-loading page.

Simplicity and consistency
Users are not impressed with complexity that seems gratuitous, especially those users who may be depending on the site for timely and accurate work-related information. Your interface metaphors should be simple, familiar, and logical — if you need a metaphor for information design, choose a genre familiar to readers of documents, such as a book or a library. Highly unusual, "creative" navigation and home page metaphors always fail because they impose an unfamiliar, unpredictable interface burden on the user.
The user interface for your Web site should follow the general navigation and layout conventions of major Web sites because your users will already be used to those conventions. Users spend most of their time on sites other than yours, so avoid highly unusual interfaces if you wish to attract and keep a large audience.
The best information designs are never noticed. An excellent model of interface design is the Adobe Corporation Web site. Graphic headers act as navigation aids and are consistently applied across every page in the site. Once you know where the standard links are on the page header graphics, the interface becomes almost invisible and navigation is easy:
For maximum functionality and legibility, your page and site design should be built on a consistent pattern of modular units that all share the same basic layout grids, graphic themes, editorial conventions, and hierarchies of organization. The goal is to be consistent and predictable; your users should feel comfortable exploring your site and confident that they can find what they need. The graphic identity of a series of pages in a Web site provides visual cues to the continuity of information. The header menu graphics present on every page of the Adobe site create a consistent user interface and corporate identity:
Even if your site design does not employ navigation graphics, a consistent approach to the layout of titles, subtitles, page footers, and navigation links to your home page or related pages will reinforce the reader's sense of context within the site. To preserve the effect of a "seamless" system of pages you may wish to bring important information into your site and adapt it to your page layout scheme rather than using links to send the reader away from your site (be sure there are no copyright restrictions on copying the information into your site).

Design integrity and stability
To convince your users that what you have to offer is accurate and reliable, you will need to design your Web site as carefully as you would any other type of corporate communication, using the same high editorial and design standards. A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.
Functional stability in any Web design means keeping the interactive elements of the site working reliably. Functional stability has two components: getting things right the first time as you design the site, and then keeping things functioning smoothly over time. Good Web sites are inherently interactive, with lots of links to local pages within the site as well as links to other sites on the Web. As you create your design you will need to check frequently that all of your links work properly. Information changes quickly on the Web, both in your site and in everyone else's. After the site is established you will need to check that your links are still working properly and that the content they supply remains relevant.

Feedback and dialog
Your Web design should offer constant visual and functional confirmation of the user's whereabouts and options, via graphic design, navigation buttons, or uniformly placed hypertext links. Feedback also means being prepared to respond to your users' inquiries and comments. Well-designed Web sites provide direct links to the Web site editor or Webmaster responsible for running the site. Planning for this ongoing relationship with users of your site is vital to the long-term success of the enterprise.