UX/UI, white space, great photography, and the “above the fold” debate are all topics that are thrown around when it comes to designing and building eCommerce sites. But what are these topics, what do they do, and are they actually important? Use this in-depth guide to discover how each factor contributes to the ultimate success of websites.
UX & UI :: Are They the Same Thing?
What Does UX Stand For?
UX is shorthand for user experience…but the concept is anything but short. UX encompasses a range of work that includes, but is not limited to:
- Field research
- Copywriting
- Visual design
- Development planning
- Analyzation of customers and competitors
- Integration of SEO strategies
What is UX Web Design?
In the digital world, UX web design can be defined as anything that creates a relationship between a website and a user. It mainly focuses on how users look, click, and move through a site.
In the real world, user experience is practiced at any time a product or system is used. If an object is easy to use and provides a simple experience, it’s more than likely that UX was a part of the object’s design.
What Does UI Stand For?
UI is shorthand for user interface and pertains to the look and style of a website. Like UX, it includes a variety of tasks such as:
- Design research
- Branding development
- Graphic development
- Creation of user guides
- Integration of animations
- Adaption of screen displays to all user devices
What is UI Web Design?
In the digital world, UI web design focuses on how a site looks to a user. It utilizes optimal color contrast, appropriate font sizes, and website formats that appeal to users while guiding them through web pages.
In the real world, UI design is evident any time an individual uses an object, it works with ease and simplicity, and it benefits them.
Do I Need UX and UI Design?
Do the scenarios below pertain to your website? Find out if it uses UX/UI design correctly.
✗ You create an attractive site with eye-catching design features, but the user can’t easily navigate to desired pages.
✗ You create a website with all the information and details an end user could want regarding your topic or product, but the website template looks like it was created in 1991 and the branding is inconsistent.
✓ You create an attractive website with memorable design features and the user can easily navigate to each page to find exactly what they are looking for.
The first two situations both fail at creating a successful site because they don’t incorporate a UI/UX design and strategy. User interface and user experience work hand-in-hand and ultimately create the most successful websites when used simultaneously.
Using White Space Effectively
What is White Space?
White space is commonly discussed in reference to graphic design and page layout. However, the term can also be applied to almost any type of design.
In layman’s terms, white space is the negative, empty space found in between elements on any platform. When used effectively, it can drastically improve a website’s readability, flow, and aesthetic feel. In terms of website building, white space can be broken down into two main categories:
- Macro white space :: empty areas between large elements in a composition (e.g. ample space on either side of content)
- Micro white space :: empty areas between or within smaller elements (e.g. line hight and image padding)
Why is White Space Important?
Many business owners feel the need to fill white space on every web page. They may think that white space equates to wasted space. However, having white space is one of the most important elements of web design. Utilizing white space:
- Allows you to provide users with a focus that you deem the most important.
- Lends a sense of sophistication and cleanliness to a design.
- Evokes a user’s feeling of calmness and relaxation.
- Encourages the use of imagination and/or a strong emotional response by requiring users’ brains to fill the void on pages.
- Provides you with a way to guide users from element to element on a single page (otherwise known as “active white space”).
- Ensures optimal legibility and improved comprehension by allowing users to read and digest text quickly.
- Generates increased interaction by limiting distractions on a page.
- Helps group related elements together for a logical design and tidy appearance.
Finding a balance between informational and visual elements and blank space is a crucial factor in creating a successful website. You can even take it one step further by using photos with white or negative components as white space.
The Importance of Great Photography
Why Does Using Great Photography Matter?
It’s widely known that visuals bring forth feelings in humans. As we walk into a buffet, our eyes immediately scan the food line to pick out everything we want to eat, conjuring the feelings of desire, happiness, or even guilt. The use of great photography on websites works similarly in that they help to generate emotion from users.
Let’s say we add high-resolution photos of coworkers laughing together on the careers page of a website. This lends a sense of longing for work friendships and adds a warm, inviting feeling to the page. Whichever the user feels, the emotion can push them into action. Perhaps the user applies for a job opening, or maybe they decide your professional yet fun staff is the perfect choice to help them with their business.
Professional, modern photos and designs also provide a sense of trustworthiness. In order to achieve this, some companies opt for hiring an in-house professional photographer, while others outsource to photography companies. It’s always recommended to use original photos, but if companies cannot afford this in terms of time or money, they may turn to online stock photos from sites such as iStock, Unsplash, or Pexels. No matter the method used, photos should have a high resolution and proper cropping for visual appeal.
Above the Fold
What Does “Above the Fold” Mean?
“Above the fold” is a phrase that describes the strategy of placing the most important information above the fold on a newspaper, allowing readers to see and read it before they unfold the pages and begin digesting the news.
For websites, “above the fold” is the area a user sees on a page before they need to scroll down.
Is “Above the Fold” a Myth?
It’s safe to say that the Internet has greatly evolved since the creation of the first website. Not only has the appearance of websites changed in the past 27 years, but their sole purpose has adapted to the changes in culture and progression of technology.
When the Internet was new to the world, many people thought that websites should display the most important information at the very top of pages to eliminate the need to scroll. It was hypothesized that users didn’t take the time to scroll down on pages, so in order to capture audiences, provide information, and answer questions, everything needed to be crammed at the top of pages.
However, tests dating back to 2009 suggest that users are more than willing to scroll down web pages until they find what they’re searching for. Testing also found that spacing content out encouraged users to explore past the fold. In one instance where users weren’t scrolling down a page, it was found that a strong, horizontal line was placed across the bottom of the initial screen, prompting users to think it was the end of the page. In reality, it was just a separation line in between sections. Once the line was taken out and replaced with white space and content, there was an increase in users scrolling down the page.
Other sources say that, after testing, it was discovered that most users scroll down on pages before they even fully load. In fact, 66% of attention on a normal media page is spent below the fold.
Moreover, our technological devices are vastly different now, which directly influences our scrolling habits. When the Internet first became available, computer screens or monitors were the only mediums in which you could view web pages. At that time, they were limited in resolution and size. Now, we display and work with the Internet on many platforms from large-screen televisions and computer monitors to laptops, tablets, and smartphones. There is no longer a consistent screen size to design for anymore. Instead, designers build websites to suit a multitude of display devices (see graphic) and the information looks different on each.
So, what’s the overall takeaway here? Is “above the fold” a myth or should you still consider it when designing a website? The real answer is that the focus shouldn’t be on having content above or below a fold, it should be on producing and displaying clear, concise, and useful content that engages users and answers their questions.
Image Credit: GlobalDots.com and LukeW.com
Tying It All Together
UX/UI design, white space, great photography, and the debunking of “above the fold” work together to form websites that users want to click on. They may not look like much as they stand alone, but using each factor simultaneously can catapult your website into success.
