eCommerce UI & UX

Creating a successful ecommerce website goes beyond showcasing products and processing transactions. It involves designing a user interface (UI) that is not only visually appealing but also user-friendly and responsive across all devices to deliver a great user experience (UX).

The user interface is what people see and how they use your website, so it’s fundamental to the success of your ecommerce operation. It’s essential to spend some time getting this right from the ground-up, following a process from simple page structures laying out the essential elements of each page type (known as wireframing) to a functional design to test the interactive elements and finally a complete design mock-up. Naturally, at Wired In we have honed a highly efficient design process incorporating all the best practices below, so talk to us today if you’d like to (re)design your ecommerce site.

Wireframing

What is Wireframing?

Wireframing is the process of creating a simplified visual guide that represents the skeletal framework of a website. It focuses on layout, content placement, and the overall structure without delving into design details like colours and graphics.

Benefits of Wireframing:

• Clarity: Helps in defining the layout and navigation structure of the website.
  
  
• Focus on Usability: Allows designers to prioritise user experience (UX) by planning the placement of elements like menus, buttons, and forms.
  
  
• Feedback and Iteration: Provides a basis for early feedback from stakeholders, allowing for quick adjustments before moving to the more detailed stages of design.

Wireframing Tools:

• Mockflow: Our tool of choice for UI design
  
  
• Sketch: A popular design tool with robust wireframing capabilities.
  
  
• Balsamiq: Known for its simplicity and ease of use, ideal for quick wireframe sketches.
  
  
• Adobe XD: Offers comprehensive wireframing and prototyping features, allowing for a seamless transition from wireframes to interactive prototypes. It has now been discontinued following Adobe’s purchase of Figma.

Prototyping

What is Prototyping?

Prototyping involves creating interactive models of the website to simulate the user experience. It includes clickable elements, animations, and transitions to provide a realistic preview of how the final product will function.

Benefits of Prototyping:

• User Testing: Allows for early usability testing, helping to identify potential issues and areas for improvement.
  
  
• Stakeholder Engagement: Provides a tangible representation of the website for stakeholders to interact with and give feedback.
  
  
• Reduced Development Time: Helps in clarifying requirements and reducing misunderstandings, leading to a smoother development process.

Prototyping Tools:

• Mockflow: As well as being an excellent wireframe tool, Mockflow is a capable prototyping tool.
  
  
• InVision: A powerful tool for creating interactive prototypes and collecting feedback.
  
  
• Figma: Allows for collaborative design and prototyping, making it easier for teams to work together in real-time.
  
  
• Axure RP: Known for its advanced prototyping capabilities, including dynamic content and conditional logic.

What is Responsive Design?

Responsive design is an approach that makes web pages render well on a variety of devices and window or screen sizes. It uses flexible grids and layouts, images, and CSS media queries to adapt the design to the user's environment.

Key Elements of Responsive Design

Fluid Grid Layouts:

• Flexible Grids: Use percentages instead of fixed units for widths, ensuring elements resize proportionally.
  
  
• Breakpoints: Define specific points where the layout changes to fit the screen size better, providing a seamless experience across devices.

Flexible Images and Media:

• Responsive Images: Ensure images scale appropriately by using CSS to limit the maximum width to 100% of their containing element.
  
  
• Adaptive Media: Use HTML and CSS to adjust video and other media sizes, ensuring they are viewable on smaller screens.

Media Queries:

• CSS Media Queries: Apply different styles based on the device characteristics, such as screen width, height, resolution, and orientation.
  
  
• Breakpoint Strategies: Define breakpoints to target specific device ranges, optimising the layout for various screen sizes.

Benefits of Responsive Design

Improved User Experience:

• Accessibility: Provides a consistent and accessible experience across all devices, ensuring users can easily navigate and shop on your site.
  
  
• Engagement: Enhances user engagement by providing a seamless experience, reducing bounce rates and increasing time spent on the site.

SEO Benefits:

• Search Engine Ranking: Google favours mobile-friendly sites in its search results, so a responsive design can improve your site's SEO.
  
  
• Single URL: With responsive design, you maintain a single URL for each page, making it easier for search engines to index your site.

Cost Efficiency:

• Maintenance: It’s much easier to maintain a single responsive site compared to managing separate desktop and mobile versions.
  
  
• Development: Reduces development costs by eliminating the need for separate mobile site development.

Implementing Responsive Design

Mobile-First Approach:

• Design for Mobile First: Start with the mobile design and scale up for larger screens. This ensures essential elements are prioritised and provides a solid foundation for more complex layouts.

Performance Optimisation:

• Load Times: Optimise images and resources to ensure fast loading times on all devices. Use techniques like lazy loading and content delivery networks (CDNs) to enhance performance.
  
  
• Testing: Regularly test your site on various devices and screen sizes to ensure a consistent experience.

User Interface (UI) Considerations:

• Touch-Friendly Elements: Ensure buttons and interactive elements are large enough to be easily tapped on touchscreens.
  
  
• Readable Typography: Use scalable fonts and adjust text sizes for readability across different devices.

Navigation

Effective navigation is the backbone of a well-designed ecommerce website. It ensures that users can easily find products, access information, and complete transactions with minimal effort. Here are some best practices for creating intuitive navigation on ecommerce websites:

Simplified Menus

Key Principles:

• Clear Hierarchy: Organise categories and subcategories in a logical hierarchy. Use descriptive labels that are easy to understand, avoiding jargon or acronyms where possible.
  
  
• Minimalist Approach: Avoid cluttering the navigation menu with too many options. Focus on essential categories and group related items together.

Techniques:

• Mega Menus: Use mega menus for large inventories, displaying all categories and subcategories in a single dropdown. This helps users see the full range of products without overwhelming them and prevents the need to hunt around in fly-out menus.
  
  
• Collapsible Menus: For mobile devices, use “hamburger” menus (the three lines tapped to open a menu) and collapsible sub-menus to save space and provide a clean, uncluttered look.

Search Functionality

Importance:

• Quick Access: A robust search function allows users to quickly find specific products or information, enhancing their shopping experience. 43% of users on retail websites go directly to the search bar (Forrester Research).
  
  
• Error Tolerance: Implement error tolerance to account for typos and spelling mistakes, ensuring that users still find relevant results. 42% of sites fail to fully deliver on all search query types (Baymard Institute).
  
  

Best Practices:

• Autocomplete and Suggestions: Offer autocomplete suggestions as users type, helping them find products faster.
  
  
• Filters and Sorting: Enable users to refine search results with filters (e.g., price, brand, ratings) and sorting options (e.g., relevance, popularity).

Wired In recommend Algolia for ecommerce search, with its superfast search results and sophisticated relevancy algorithms.

Breadcrumb Navigation

Benefits:

• Orientation: Breadcrumbs provide users with a clear path of where they are on the website and how they got there.
  
  
• Ease of Navigation: They allow users to easily backtrack to previous pages or higher-level categories without starting from scratch.

Implementation:

• Consistent Placement: Place breadcrumbs at the top of the page, just below the main navigation menu.
  
  
• Clickable Links: Ensure each level in the breadcrumb trail is clickable, allowing users to navigate back to any previous point in their journey.

Consistent Design Elements

Principles:

• Uniformity: Maintain a consistent design for navigation elements across the entire site, including menus, buttons, and links.
  
  
• Visual Cues: Use visual cues like colour changes, underlining, or bold text to indicate active or selected items.

Techniques:

• Sticky Navigation: Implement sticky headers that remain visible as users scroll down the page, providing constant access to the navigation menu.
  
  
• Highlighting: Use hover effects or highlighting to indicate clickable elements, improving user interaction.

Keyboard Navigation

Importance:

• Inclusivity: Many users rely on keyboards or assistive technologies to navigate websites. Ensuring your site is fully operable via keyboard is crucial for accessibility.

Best Practices:

• Focus Indicators: Use clear focus indicators to show which element is currently selected when navigating with a keyboard.
  
  
• Tab Order: Ensure a logical and intuitive tab order for navigating through interactive elements like links, buttons, and form fields. The Tab key is typically how keyboard users switch between links in a web page to select one.

Screen Reader Compatibility

Principles:

• Descriptive Text: Use descriptive text for all interactive elements, ensuring that screen readers can convey their purpose to users.
  
  
• ARIA Landmarks: Implement ARIA (Accessible Rich Internet Applications) landmarks to provide additional context and structure to screen readers.

Techniques:

• Alt Text for Images: Provide descriptive alt text for all images, helping visually impaired users understand the content.
  
  
• Semantic HTML: Use semantic HTML tags (e.g., <header>, <nav>, <main>, <footer>) to structure your content logically, aiding screen readers in understanding the page layout.

Colour Contrast and Readability

Importance:

• Visibility: Adequate colour contrast ensures that text and important elements are easily readable by users with visual impairments.
  
  

Best Practices:

• Contrast Ratios: Adhere to the Web Content Accessibility Guidelines (WCAG) recommendations for contrast ratios (minimum 4.5:1 for regular text and 3:1 for large text), with dark text on a light background being easier to read. Remember to avoid colour combinations that people with colour blindness will struggle to see.
  
  
• Font Size and Type: Use legible font sizes and types, avoiding overly decorative fonts that may hinder readability. 13px is a good size for body text.

Responsive and Mobile Accessibility

Principles:

• Device Agnostic: Ensure that your website is accessible and functional across all devices, including smartphones and tablets.

Techniques:

• Touch Targets: Design touch targets (buttons, links) to be large enough for easy interaction on touchscreens, typically at least 44x44 pixels.
  
  
• Viewport Meta Tag: Use the viewport meta tag to control the layout on mobile browsers, ensuring that your site adapts to different screen sizes and orientations.

Accessible Forms

Importance:

• Usability: Forms are a critical component of ecommerce websites, used for user registration, checkout, and contact purposes. Ensuring they are accessible improves usability for all users.

Best Practices:

• Labels and Instructions: Provide clear labels and instructions for all form fields. Use placeholder text judiciously, as it can be less readable and less accessible than properly labelled fields. Labels are best placed above fields rather than to the left.
  
  
• Error Messages: Offer descriptive error messages and suggestions for correcting mistakes, ensuring they are conveyed to screen readers.

Implementation:

• ARIA Attributes: Use ARIA attributes like aria-label, aria-required, and aria-describedby to enhance form accessibility.
  
  
• Validation Feedback: Provide real-time validation feedback and ensure it is accessible to screen readers. This means checking fields as they are completed, rather than waiting until the full form is submitted.

The importance of a good user interface and user experience on an ecommerce website cannot be overstated, as it fundamentally impacts your ability to sell online. If you’d like to improve your conversion rate and customer satisfaction, contact our experts today. You can read more tips on improving ecommerce website design here.