Serve Your Readers Content in Bite Size Pieces

The homepage on the Greater Palm Springs tourism website has a great layout. The information is delivered in bite-size chunks. They share a lot of information but in small units. 

By giving readers a little information at a time, you avoid overwhelming them. Most people don’t read all the words on a page.

The book, Don’t Make Me Think by Steve Krug talks about the user experience in more details. Krug emphasizes that most visitors are on a mission when they visit a website. They don’t read everything but instead scan things on the website. If buttons are hard to read and headers are not for navigating or organizing people have a harder time searching and scanning information. 

Krug’s number one design rule for web and mobile usability is to not let the reader think for themselves. Good hierarchy and use of grids keep content well structured.

Design with Color Theory In Mind. Avoid colors that don’t contrast well together.

This example is a business card for a local medical spa. The designer used a lime green color. However, it’s hard to distinguishing the circle object in the center. The greens are too similar to each other. This can make the object look off cue.

Also, the pink art is hard to see. Is it a paint splash or a fairy figure? Or is it a flower? Objects, shapes and colors should be easy to identify. Also, the font weights can be more vivid.

Remove whats not necessary

This remote is outdated. It has over a handful of buttons that are not ever used. For instance, the colorful alphabetical buttons are never needed. The pre-channel as well. Numbers aren’t necessary either because several apps have their own interface. Such as Amazon Prime and T.V. channel apps.

The Best Interfaces Have Only A Few Buttons

Amazon’s fire-stick remote is a lot more simpler than the bad example. It has a touch button that’s sleek. It also allows for the device to have minimal buttons. The only options displayed are the most common functions. It’s not complicated to use at all.

Use Words That Create Action

People are motivated by progress. In example one the button is a call to action offers mastery and strategy. Once people go through the course they will know a new skill. This compelling motivator is the small appetizer before the next larger offer. 

In Steve Krug’s book Don’t Make Me Think, he talks about making things too simple. In example two it shows that when buttons are not clear. These are too simple. The font colors and backdrop are not contrasting against one another. They are almost invisible to the viewer. 

The grey plain color is boring, hard to see and not appealing which makes it hard to visually remember either. The author discusses why its important to make things clear and easy to see and understand. People are using their devices more than half the time when on a website. 

The call to action and email conversion should be striking and have an intrinsic reward. Which will have an immediate call to action. For example, people don’t need to pay or hassle with a credit card. Instead a quick email away and the consumer gets an intrinsic reward.

Avoid Making Pages Too Busy

According to expert research and data people are attracted to a websites vibe. Things such as photos, colors, buttons, and text layout. If people can’t relate to the design and feel it looks poorly done they will most likely won’t trust it or the business. The example here has many confusing and unpleasant factors. For instance, the left and right side panels are distracting and have minimal white space between the sections. The content is condensed which makes the information hard to find, understand and differentiate. 

Keep Things Simple

Toaster ovens and most kitchen appliances are designed to be simple. These devices are easy to use without instructions. You can use the many features with just a turn of a nob. These nobs activate an entire meal preparation. Yet it has few options on temps, speeds and settings. Yet, it’s a powerful tool.

Use Strong Keywords and Hierarchy within Headers

People believe information more if it has words and pictures associated together. The brain remembers events and makes decisions based on visual contexts. For instance a headline, content and photograph creates credibility. In this example I found online the designer repeated a few keywords over: progress, transforming and innovation.

Size Photos Correctly To Avoid Blurry Images

This photo looks great on this San Diego tourism website. However, its not sized correctly. The right and left sides of the photo are cropped too narrow. Also, the image should be a high-resolution. The size of the file and photo are the wrong dimensions as well. You can tell because the peoples faces are blurred. Nonetheless, its hard to capture a large photo like this. In addition, they should have used a large landscape camera lens as well.

Avoid Hard To Read Fonts

Decorative fonts make it hard for the brain to recognize the patterns that are in sync with letters. This font choice is too decorative. Readers are frustrated just trying to figure out the words. If the designer used a serif and sans font it would be more visually appearing. However, many designers like ambiguity and therefore use fancy scripts and decorative fonts. This one is also vibrant with conflicting colors and an odd vibe.

Include Pictures and Connect with the Users Right Away When Possible

The hero image is the first image users see when they log onto a website. As a UX designer its important to keep that in mind. Below is a great visual example of this. There’s a special part of the brain just for recognizing faces. I searched several websites and now I see the strategic Hero or Homepage personal photos. The FFA part of the brain relates to human emotions. Faces allow us to connection with a person faster than a product. I find this to be true with myself as a consumer because I typically feel the most comfortable buying from a website that a reputable brand image or a person behind the brand. Most websites that I’m drawn to right now have pictures of humans with warm faces and smiles similar to this one here.

Icons

Icons are good for ux design because they explain things without words. People can identify with them fast and effectively. I found these icons on Pinterest and they are primarily used for websites and digital devices.

This visual example are objects and patterns. Simple in nature. These small flat 2D objects that are easy to use and make a great impact in ux design.

Pop-ups

Its been a known fact that people don’t want to stop a task to fill out a pop-up newsletter. Pop-ups have been known to be distracting. Most people opt-out of them. Marketing today on the internet can be challenging. However, with clever and valuable opt-in’s offers companies and websites can build and earn more email subscribers.

Examples of Good and Bad UX in Web design

The Golden Section in Web Design

The golden section is from the Fibonacci formula. It’s a perfectly pleasing grid. It’s found in leaves, seashells, flowers, and more. It’s used in many famous paintings like “The Creation of Adam” by Michelangelo. The mathematical dimensions create a perfect outline for all kinds of art. This formula can help web designers create more engaging content.

This grid formula is used for design projects and web layouts a lot. Designers use this knowledge is in architecture, painting, logo design, and more. It dates back to the beginning of time and is often found in nature’s DNA. In this example (below) I show this grid being used for a yoga website hero image.

Good Example of UX

This is a good example of UX design in web design because it’s visually pleasing. The female character is floating to the right side of the section. The information on the left is in alignment. They are within perfect reach of each other, just like the squares are in the golden section.

The golden grid is also applied here. I like how the designer included the three headers as well. The three grouping rule is also a popular design rule.

Bad Example of UX

This last example is a hero image I found a spa and medical website. Most likely the owner built her own website. She did several things wrong here. For instance the photo has a women centered right in the middle of the page. It’s suggested that even people in photos should not be perfectly centered.

This designer also used a shadow on the header styling. The business name gets lost on this layout. It’s hard to read, understand and even more it doesn’t make the image seem appealing.