Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Design Myths to Avoid

Tuesday, March 14, 2017

by Paula Borowska

Design Myths that will ruin your website

Adhering to design myth guidelines can result in bad design and a poor user experience, Paula Borowska writes. Borowska outlines seven of the most common myths she regularly sees, including the idea that the home page is the most important page and only minimalist designs can be simple.

10 Reasons Ecommerce Sites Fail

Tuesday, March 7, 2017

Ecommerce Website Mistakes
Ecommerce offers fantastic revenue opportunities, the ability to be open 24/7 and traditionally fewer overheads when compared to bricks and mortar retailing. Yet, despite the fact that more than 12 million Australian consumers shop online -- and we are experiencing year-over-year double digit growth in online shopping -- a huge number of ecommerce businesses are struggling to be profitable, or in many cases, survive.

If you own an ecommerce store, or are planning on building one, here are 10 crucial items to be aware of that will have a significant impact on the success or failure of your business.

Mobile web use edges out mobile apps

Thursday, February 9, 2017

Mobile Web Users vs Mobile App users

Twenty-three percent of consumers use mobile web browsers to access content, outpacing the 15% that use mobile apps, CodeFuel reports. The researchers found that users prefer the freedom found on mobile web browsers, which gives greater ability to browse than do their app counterparts.

Major icon design trends to watch in 2017

Ben Bate looks at five icon design trends expected to make their mark in 2017, including complimentary color gradients, hand-drawn iconography and greater depth through the use of overlapping, shadows and bright colors.

Master design with the help of psychology

Friday, February 3, 2017


UX Design Psychology
"There's a psychological approach to web design -- based on decades of studies and psychology experiments," Robert Mening writes. Mening outlines five psychology-backed user experience tips to keep in mind during the design process, including understanding the importance of color selection and choosing the right font size.

Remember to design with art and content in mind

Friday, January 27, 2017


Creating a strong user interface is essential, but once that UI is in place, "all the viewer cares about is what's inside: the artwork, the story," Paul Woods writes. Woods outlines five ways to ensure your content is as strong as your UI, including outlining real content in the early stages of the design concept and focusing on the details of your photography and illustrations.

Why the type of music you listen to affects design

Friday, November 18, 2016


Background noise can sometimes starve creativity and build frustration, especially for mentally intensive creative work, writes Kaysie Garza. She gives suggestions for the best music for design in any environment.

Understanding the purpose of color

Saturday, November 5, 2016

Busting The Color Conversion Myth

Color doesn’t happen on accident. Except in finger painting, of course.

In the world of marketing, everything has a purpose, and color is no exception. From the logo to the landing page, color is instrumental in communicating to customers what your purpose is, what image you’re projecting and, most importantly, how you want them to feel.

There’s been a lot of talk on the internet about which colors convert the best in online marketing, but most experts agree that a one-stop solution doesn’t work. What works for an organic produce shop might deter customers from an online software company. So no matter how many websites swear they’ve figured out the definitive answer to the color conundrum, the truth is, no one really knows for sure.

So what do we know? Well, for starters…

Why hamburger menus are bad design

Tuesday, April 26, 2016


Hamburger menus are often disparaged because they do not offer clear navigation, but they may be even worse on mobile phones because their position in the top-left corner is the hardest spot for right-handed smartphone users to reach. Traditional menus are more effective, writes Stephen Moyers.

Analyzing the Effectiveness of Hamburger Menus in Web Design


Odds are you’ve seen the “hamburger menu” in the top corner of many of today’s mobile websites. It’s three lines stacked together to roughly form the shape of a hamburger. It was created as a website design feature to incorporate a site menu without taking up too much room.

While the hamburger menu serves its purpose of condensing information, achieving a minimalist aesthetic, and keeping a site uncluttered, it may have significant drawbacks.

Whether you call it a side menu, navigation drawer, or hamburger menu, it may be time to replace it with something that’s better for user engagement. Many people debate the advantages of using a hamburger menu in web design, using the “out of sight, out of mind” adage to claim that hiding your site features decreases user involvement with your site, and doesn’t bode well for conversion rates.

The idea of a menu that accomplishes the goal of preserving precious interface space spread like wildfire throughout web design and was adopted quickly by nearly every website and app across the board. It may be too late for a change now, but it’s still worth mentioning the cons of the hamburger menu as users begin to seek a change.

Hamburger Menu Lacks Efficiency

One of the most basic pitfalls of the hamburger menu is its prominent location on mobile apps – the top left corner. This is the hardest place to reach on a mobile device for a right-handed user, and doesn’t exactly encourage engagement.

The user also has to tap the menu once before being able to see what their options are, and then tap again when they’ve found the right option. They also have to swipe, or “back” through multiple screens to get back to the hamburger menu before continuing their site navigation. It may not seem like a lot, but this doubles the amount of time it takes for a user to access the correct page. Users are growing savvy to this fact and complaining about the efficiency of the ever-present hamburger menu.

In today’s ultra-competitive market, what makes your site stand out from others needs to be front and center to hook users immediately upon arrival. When your site crams all of its content into a hamburger menu, you risk your users never seeing what makes your brand special. This hurts overall brand awareness and conversion rates and doesn’t do anything to promote your product.

mage Source: Hamburger Menu by Christina Beard.

People Might Prefer Hotdogs

While web designers were quick to embrace the hamburger menu as a revolutionary way to minimize site design in a fresh, aesthetically pleasing way, user needs were ignored completely. Many users don’t know what the hamburger menu has to offer and don’t bother clicking it. Instead, they roam around your site searching fruitlessly for the information they need.

Meanwhile, sites that have stuck with other functional menu designs grant their users easy access to all the information on their site at first glance. Users don’t have to hunt down hidden options, and there’s no risk of them completely missing information. Many companies have opted for the less-trendy route and reverted to previous menu types – such as menus that line the top of the page horizontally – and are enjoying better user results.

Hamburger menus ultimately make content less discoverable, and in an era where average users decide if they are going to stay or leave in the first 10 seconds of viewing the page, quick discoverability is critical. While the hamburger design may look more appealing, its actual level of appeal for users is lacking.

Users often find it difficult to comprehend a hamburger menu, while traditional menus cannot fail to be immediately understandable. When grumblings about the hamburger menu were heard, websites tried to alleviate user grievances by altering the menu to include a back button or other options, such as putting the word “Menu” on top of the hamburger icon to make it more user-friendly.

Image Source: Sidebar Menu Design by Andy Stone.

However, these alterations only managed to increase user confusion surrounding the menu. Now there are many hamburger menu types and users have to figure out which hamburger your site is using before they can navigate it correctly. Instead of assuming that the hamburger menu is the end-all and be-all of website navigation, you should consider other options.

How to Break the Mold

In many situations, you can optimize the hamburger menu for greater usability or replace with a different navigational option. Sometimes, simply moving your hamburger menu to the right side of the screen is enough to make your site unique and increase user engagement, since the right side is easier to tap for right-handed users.

Within your hamburger menu, you can also optimize the way options are laid out once it’s been clicked. On a top menu, users focus their attention on the first and last elements – this is where your most important information should be located. If your menu unfolds into a sidebar, you need to arrange the elements from most important to least important as the user scans options vertically.

You can also revert to pre-hamburger days with user-friendly top menus or create your own twist on a classic, such as this example:

Image Source: The Hamburger Menu Doesn’t Work.

GameStop uses animated icons to enhance usability, while avoiding the hamburger menu altogether. They’ve prioritized what their users require the most from their app, and only included these in their top menu. The site still attains a clean, fresh look without the need for hiding information in a side drawer.



This icon and the text structure allow you to condense text while still keeping the button large enough to promote being pressed – large thumbs notwithstanding. However, if you can’t possibly narrow down your site’s navigation to a few options, you can consider a text-only menu or design your site so that a menu isn’t needed. Either way, approach your navigation technique with the user in mind.

dotLaunch uses an accordion style menu, believing that web surfers don't mind scrolling as much as most people beleive. Always there, always easy to read:



Your menu should be glance-able for users who want to minimize wasted time, while still being easily understood. This may be a difficult compromise to achieve, but it’s a necessary combination if you want maximum user engagement. If you’re having trouble prioritizing your menu options, think from the perspective of your users. For example, you may pride yourself on your blog, but if users are visiting your site primarily to browse your products, the blog shouldn’t be top priority.

Follow Your Intuition

If the hamburger menu or some variation of it has been working for you, don’t feel pressured to change it by those who are seeking a new menu option. There are still users who vouch for the usability and appeal of the hamburger menu, especially when it comes to developing a website for mobile use, where space is limited.

Even though the hamburger menu is at the center of current controversy, if your site is best navigated via a hamburger menu, keep it that way – just make sure the components within your menu are up to par and designed for optimal user engagement. However, if you opted for the hamburger menu out of laziness, you may want to rethink your choice.

Start thinking of your menu as more than something that needs to be tucked out of sight, but rather something that has the power to increase conversion rates – if executed correctly. Users rely on your menu to navigate your site, and if their needs aren’t met, they’ll bounce. Whether you choose the hamburger or another menu option, remember that the end goal is the same – enhancing the user experience.

Top Image Source: Hamburger Menu Icon by Dave Gamez
 
  
 
(Courtesy of SpeckyBoy)

3 Media Management Challenges Web Developers Need to Tackle in 2016

Tuesday, April 19, 2016


The massive influx of high-definition images and videos in new formats are making responsive design difficult. This guide looks at Web evolution to meet all three demands by handling file resizing, accepting uploaded content and relying on HTML5 elements to keep it all running smoothly.

Websites have evolved greatly over the past few years. Once text-heavy websites have become more eye-catching with prominent images and video. But the addition of richer media isn’t the only change impacting websites. Consumer behavior also factors into this evolution, as web access has moved from the desktop realm to a variety of different devices – smartphones, tablets, laptops, smartwatches and TVs – with different dimensions and resolutions. And consumers want to be able to access web content anytime and from any location.

In 2016 and beyond, developers will need to address many challenges to ensure that website performance is optimized, bandwidth usage is minimized and users have a top-notch experience. Here is a look at three major media-related challenges, and what developers can do to address them:

1. High Resolution Images and Videos

The old adage states that a picture is worth 1,000 words, so it’s no surprise that website owners are using images and videos as powerful tools on their websites to engage visitors. High-resolution images look best, but these files are so big that they cause websites to load slow and use excessive bandwidth. These problems frustrate visitors, and potentially give them incentive to not engage further on the website.

Whether your users are visiting your site from a phone or a computer, it’s imperative that it loads quickly. Gabriel A. Mays, founder of Just Add Content, a website platform for businesses, told CIO magazine that developers should “Aim to keep website load time to [a few] seconds or less. Your biggest threat isn't a competitor, it's the back button. If your website loads too slowly, customers won't wait around. They'll go elsewhere.”

Generally, to address these issues, developers must:
  • Resize images/videos to match device resolution – One size doesn’t fit all, particularly with the increasing number of devices of different sizes being adopted by consumers.
  • Leverage modern image formats or video codecs – For images, consider using WebP, with automatic fallback to other formats, like JPEG, for browsers that don’t support newer formats. With video, consider the codecs, frame rate and bit rate to save file size and bandwidth.
  • Adjust the quality level – There is a tradeoff between compression levels and visual quality to ensure a satisfactory user experience without excessive bandwidth use.
Developers also must stay on top of the trends relating to new types of images and how to best display them on their websites. For example, Apple introduced Live Photo, kind of a hybrid between a static image and video, combining a photo with other moments before and after it was taken, and displays them with movement and sound. Developers will need to know how best to support uploading, transforming and displaying these new forms of content in a way that is not bandwidth or storage intensive, and is visually appealing regardless of device on which it is viewed..

2. Greater Use of Video – Upstream and Downstream

It’s undeniable that video is becoming a primary component on the web – from the website owners that are using on their sites to attract visitors, to the videos being uploaded by users. Consider this: Every second, nearly a million minutes of video content will cross the network by 2019, according to the Cisco Visual Networking Index. With that quantity, it would take an individual more than 5 million years to watch the amount of video that will cross global IP networks each month.

As users upload greater quantities of videos, developers are going to be tasked with taking videos of various qualities, dimensions and aspect ratios and making them fit into the graphic design of their site or mobile app.

But it’s not just the number of minutes of video being uploaded, it’s the resolution. Today’s devices are made to handle high resolution video, and as a result 4K video is increasing in popularity. But the huge resolution translates into long upload and download times; need for increased storage space; and intensive processing related to converting, resizing and manipulating these videos.

Developers will need to normalize and optimize 4K and high-res video specifically for web and mobile devices, and leverage responsive technology that will enable them to deliver the smallest file size while still maintaining the highest visual quality to match the user’s device, browser and network speed.

3. Responsive Design

Developers wrangle with several challenges related to ensuring images and videos look and operate properly on the plethora of devices in use today and at various resolutions. The de facto standard for addressing these challenges is responsive design, which enables the same website to adapt to different resolutions. As a result, developers need to explore how to effectively use responsive design techniques.

Google, as well as standards organization W3C, Microsoft and Apple, are trying to simplify responsive design with solutions built into web browsers. But these aren’t sufficient. For example, the Client Hints solution being promoted by Google is only supported in Chrome, so additional work is required to ensure your images are displayed properly on other browsers.

Others relying on the new new HTML5 features- specifically the element and the ‘srcset’ attribute of the element - to define the various image resolutions and art-directed cropped and manipulated image versions within the HTML code. There are two problems with this approach. First, not all browsers support the modern HTML5 features, so developers are forced to use fallback mechanisms for browsers that don’t. And second, while the browsers automatically select the best matching images for each device and resolution, the browser doesn’t automatically create the images. The developers need to work harder in pre-creating all different image versions or use a dynamic image manipulation service.

However, these solutions do not focus on finding the appropriate breakpoints, which is critical for images. Breakpoints are the optimal resolutions and sizes of images needed to best fit the various devices and screen sizes on which your website will be viewed.

For determining breakpoints developers need a solution that helps them decide which image resolutions are needed, create multiple images, integrate with their HTML code or leverage Javascript solutions. Google has been supporting modern HTML5 elements in Chrome for awhile, and now Microsoft and Safari are adding support for responsive design to the latest versions of their browsers.

A Strong Start

The evolution of video and image formats, coupled with constant innovation in devices and displays, will continue to challenge web designers and developers, as they seek to create a superb user experience while minimizing the impact on bandwidth, storage and website performance.

Effectively managing high resolution files, adeptly handling the growing amount of video both incorporated in designs and uploaded by users, and incorporating responsive design techniques as described above can help developers address some of the challenges they are facing today, and establish a good foundation for future best practices.
 
 
(Courtesy of OneXtraPixel)

10 great UX features from the Airbnb website

Monday, March 7, 2016

Airbnb has been very successful, to say the least. Of course, a disruptive business model has been a big factor, but a great user experience has played a big part.

While travel brands have. in general, been slow to adapt to the web, brands like airbnb (and booking.com) have shown the way in terms of UX.

So, here’s a selection of UX delights from airbnb…

Easy search box

When you head to the airbnb homepage, user attention will tend to focus on the search box.

It’s simple to get started too: enter destination, check in/out dates and number of guest and you’re in.

 Compare this to the ibis homepage (both shots show what’s visible above the fold). The search box doesn’t stand out against all the other elements on the page.


Search results pages

The presentation of site search results is very important. The ease of use, ability to tailor the selection to your needs and find key information can drive more bookings.

Here, the presentation is clear, and there are plenty of ways to sort and filter the selection of homes on offer.

The ability to search by moving the map

I love this, as it suits the way I like to search. Let’s say you want somewhere near the centre of town (Seville in this case) or perhaps near a beach or other attraction – this feature allows you to search around that area without having to start again or amend your search radius.

It also works well too, loading new results quickly and allowing a quick preview of the apartments helps.


Mapping results is a key feature of most travel sites, but airbnb does this as well as any.

Urgency

Airbnb uses urgency well.

This is a useful tactic, as it pushes the customer to come to a decision on whether or not to make a booking.

Here, when looking for a place to rent in New York next weekend, I’m warned that just 11% of homes are left. This means I need to make a decision quickly to secure a booking.



Urgency should be used in moderation – use it too much and customers will learn to ignore the message.
It should convey useful information, like this note telling me I’ve found an apartment which is usually booked up.


Social proof

Social proof helps to persuade potential customers through the wisdom of the crowds.
So, in this case, if other people have booked here and enjoyed it, then that’s a big push for the potential customer.

Here, it also acts as a quality control mechanism for airbnb, as bad reviews will help to weed out the poorer rentals, while the need to attract good reviews offers a powerful incentive for people to ensure their customers have a great experience.



Images

Airbnb works around images. The homepage is image-heavy, but the most crucial use is in apartment listings.

Many travel sites used to expect that a couple of small images would work, but people want to see detail. It’s a huge part of the decision on whether or not to book.
It’s up to the homeowners to take and show a good range of images, but airbnb ensures they are presented well.

There are a few key features here:
  • Plenty of images.
  • Images showing views from apartments.
  • Images showing key features – beds, cooking equipment etc.
  • The presentation. By showing in a lightbox like this, airbnb makes it easy to browse photos.


Clear presentation of information

Home listings require detail – number of bedrooms, cooking facilities, wifi, proximity of local amenities etc.

Presenting this detail without cluttering the page or making it difficult to scan and understand is important.

Airbnb uses features like symbols and bold highlighting to help users scan, while information is laid out with plenty of space.



Price bar chart

This subtle price range chart allows users to instantly get an idea of the range of prices available for their search.

It means they can narrow the price range while ensuring they will generate a good number of results.



Neighbourhood guides

This is a great feature, and very useful for visitors unfamiliar with a particular destination.
The hosts have recommended cafes, restaurants, great places to shop in the area near their apartment, shown on this map.

It’s useful when deciding whether to book, but also when you arrive, so you can find a good restaurant without having to gamble.


Forms/checkout

Forms are well presented with lots of white space and clear information around fields.

There are reminders of total cost, while errors are flagged immediately and field requiring attention are highlighted clearly.


Bad UX

It’s not all rosy, and there are a couple of features which could annoy users.

This bar encouraging me to sign up for instance. It can’t be closed and is big enough that it obscures a good part of the screen.

Perhaps users want to browse first, then sign up if they want to. This gets in the way of that.


Then there’s this, in a similar vein. This time it takes over the whole screen. Maybe airbnb has tested these popups and found they increased the number of logins.


They can work, when applied well, though it’s hard to measure the number of people who are deterred by intrusive methods like this.

The sheer number of adblock users is testament to the dislike for such tactics.

As a user, I’d be happy to sign in if I decide to make a booking, but I’d rather do this when I’m ready, rather than being hounded into it.

Airbnb should rely on its reputation, UX and sheer range of properties to convert customers, rather than intrusive formats like this.

In summary

The last gripe aside, airbnb is a great site to use.

The key processes of searching, viewing and making sense of results, and finding information on rentals is as good as any site I can think of, and better than most.
 

(Courtesy of ClickZ)