In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Cards vs Lists: Which UI Style Best Suits Your Type of Website?

Cards vs Lists: Which UI Style Best Suits Your Type of Website?

by Adrian Ababei on Jan 16 2017
It's not a matter of “better or worse”, but one of “appropriate or inappropriate given context”. This is what our experience as Toronto developers has taught us.
 
And that given context is given by your website's specificity itself! 
 
So, you should start weighting up the two UI styles, the two ways of displaying content on your website, from this perspective: each one provides the best UX for a particular type of website that you're owing/developing.
 
It's your Drupal website's particularities that shape your own purposes and your users' main goal, too, once they land on your website, and which determine the best type of web design to use, as well. 
 
In this respect: what kind of website do you have in mind?
 
Now, how about pushing these 2 “leading actors” into the spotlight?
 
How about shading some light on each one's advantages and limitations and pointing out the best contexts when they can help you provide the best UX to your visitors?

 

What's a List (or Grid) Design?

 
A more or less basic definition of a list would go something like this: a list is a page featuring several entries or candidate items meant to match the user's search criteria.
 
Lists are ideal for newspaper websites!
 
They ease users' “job” of quickly scanning over the headlines in order to gain an overview of the latest news before they decide which article's worthy for being further explored.
 
Till they decide which is the piece of news worthy, interesting enough for them to “click on for more information”, they need to quickly “overfly” all the headlines. 
 
And a list design, being more compact, is by far the best means for organizing content, for steamlining this scanning process after all.
 
Did anyone said that: facilitation is a synonym for “better user experience”?

 

What's a Card in Web Design?

 
An “entry point”, a “container of related information” or a “brief summary of information”. These are but three possible vague definitions of a card in web design.
 
Now, let's detail a bit, shall we?
 
Imagine a card as some sort of an “informational teaser”: it's a container that gives users just an entry point to some more detailed information.
 
“More detailed information” that the user can access, for further exploration, once they've clicked the card-shaped entry point.
 
It's no news for anyone that Pinterest's been THE card-based UI's trend setter.
 
Its popularity, among users, convinced Google, Jelly, Tinder, Weotta, and other giant “players” on the online arena to adopt this UI design.
 
Although a product of flat design, a card is rather a Flat Design 2.0, since it features light 3D effects (such as drop shadow) pointing out to users that they should click for “unlocking” the rest of the information prepared for them.
 
What else could we briefly (for now) say about cards?
 
They work best on archive pages, where you, as a web developer in Toronto/Drupal website owner want to just “tease” your users with brief summaries of the additional content available for them for further exploration.

 

When Should You Go For a Card-Based UI?

 

1. For Grouping Various Types of Content

 
If lists make the best choice when it comes to organizing and displaying similar content, cards, on the other hand, work wonders for helping users easily navigate through several types of content.
 
Just rely on borders for marking the differences among various elements on your website, among the various pieces of content. Thus, you'll provide a visual boundary for your users to rely on for easily navigating through your “puzzle” made of several distinct items.
 

2. For Enhancing Information Browsing

 
Think of Pinterest (again)!
 
You don't visit Pinterest to search for a particular piece of information. 
 
Instead, you have a content category in mind and some spare time to invest in exploring whatever collections of stunning images you'll might get surprised with.
 
So, basically you go on Pinterest for scanning through pins, through all those stunning images. 
 
And there you have it!
 
You've just named precisely the type of user goal that the card-based web design best responds to: “scrolling through”/”scanning through”/”browsing through” or however you wish to call it.
 
It's not for searching for specific information that you should use this type of UI, but for encouraging and enhancing the act of browsing through a whole collection of bits of information. 
 
You impose your users no content hierarchy whatsoever (like you do when using a list-style design).
 
Instead, you grab their attention with visually-arresting images encapsulated in those cards and, moreover, you layer bits of information on their surfaces, making teasing textline + eye-catching images work together hand-in-hand.
 
And since it's browsing that you're encouraging and not the act of quickly accessing a particular type of information, the card-based UI turns all the “scanning through” into a delightful, effortless and fun scroll down card-shaped results. 
 
Whenever your users spot something that surprised/intrigued/stirred their curiosity, they get to click the specific card(s) and indulge in further exploring the additional content. 
 
And there you have it: instant gratification!

 

When Should You Go For a List-Style Design?

 

1. For Ensuring Quick Access To The Needed Information

 
As already mentioned: the list-style web design is perfect for newspaper and newspaper-like websites. 
 
How come? 
 
Just think about it: on this type of site users usually land for eye scanning the given content and for quickly spotting precisely the information/article that they're interested in.
 
It's not for passing time browsing through a visually-appealing collection of card-based results that they'll access your website.
 
No sir! In fact they'd hate spending too much of their priceless time looking at amazing pictures, for they're on the look for specific information and they want to gain access to it as quickly and as effortlessly as possible.
 
So, quickly scanning through a vertical list (far more easily to eye scan than a dashboard of cards featuring no helpful hierarchy) increases their chances to find what they're looking for quick and easy, with no unnecessary distractions whatsoever. 

 

2. For Smaller Screens 

 
It's obvious why lists make a better choice for smaller screens than cards: they take up less space on the screen.
 
Therefore, users aren't constrained to keep scrolling down, when using their mobile devices, if they want to access more content and they're not forced to rely on their short-memory either. 
 
And this can only lead to better UX!
 
It's no rocket science why: list-style design enables you to display more choices, in short rows down the length of your web page.
 
Thus, you take out the (otherwise imminent) possibility of the discouraging “never-ending” scrolling of the equation!

 

In Conclusion

 
Cards are informational “teasers” linked to the content to be explored deeper into the website navigation. 
 
They make the ideal choice when it's information browsing (instead of searching) that you'd like your users to do on your website and when you're displaying several types of content that they need to easily navigate through.
 
Lists are pages displaying search results matching the search items that your users will have typed in.
 
Being far more compressed and allowing you to establish a visual-guiding hierarchy, too, they enable users to quickly access particular information as they scan through similar types of enlisted content. 

 
 
With these contexts, specific to each one of the 2 dominating UI styles, in mind, you should now be able to choose one over the other and thus to organize your content for ensuring the best user experience on your website.
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

The Complete Website UX Audit Checklist for 2020: 12 Steps to Uncover Usability Issues on Your Site
Users come to your website. They start the checkout process and... leave. Why is that? Is there a "best practice" process to identify the pain points in the user journey? A website UX audit checklist that you could use? And how would you know: what to include in your audit? what pages to review? how to interpret all the collected data and turn it into actionable insights? You've got the questions, we've got the answers. And we've included them all in an 11-point checklist to run whenever you want to assess the user experience on your website: What Is a UX Audit More Precisely? Source: process.st Let's go back to the example above: You notice that visitors on your website keep abandoning their shopping cart.  In this case, a website UX audit might uncover specific flaws in the customer journey responsible for this low conversion rate: confusing navigation structure cluttered screens a too complicated checkout process an inconsistent visual style across pages not enough payment options In other words: A UX audit helps you identify all those usability challenges with a direct impact on users' experience. key elements on your website that are too hard to find ... or too hard to use the workflow users are to perform is not that obvious and intuitive And it helps you find your answers to legitimate questions like: What is working and what isn't? What metrics are your collecting and what metrics should you be collecting? What does the gathered data tell you about your website users' needs? Why do they behave the way they do and how might they behave once you've taken follow-up action? In short: a UX audit provides you with those metrics which, once turned into updates to your website, help you boost conversions. Step 1: Run Stakeholder Interviews and User Surveys Start off by talking to your: development team, the one in charge with all the UX improvements on your website; ask them about their development challenges, future plans with the company website, and specific requirements for achieving those plans marketing team and salespeople, who might already have their own user survey results collected along the years Then, run your own updated user surveys and categorize results by: task severity findings per screen  Tip! Run usability tests to filter through the qualitative data collected on these interviews and surveys. For instance, users might report a discouragingly complex checkout process. A usability test will confirm or disprove this claim. Step 2: Create Your User Persona- A Key Point in the Website UX Audit Checklist Who are you improving your website UX for? And there are different types of users visiting your website and each user type stands for a unique way that you could improve the user experience delivered there. To narrow down your options, you need to figure out who's the most representative user for your website.  Remember to add these 3 key attributes to your user persona as you're building its profile: user goals: do they align with your business goals? needs: what does he/she try to accomplish when visiting your website? frustrations: things to avoid when designing this user persona's experience on your website Tip! Bring your business goals (that we'll be focusing on at Step 3) into the picture, as they'll help you determine who your user persona is. Also, while at this stage in your UX audit, answer these 3 crucial questions: what are your visitors' demographics and behaviors on your website where do they come from to your site? are current visitors also your target users? Step 3: Get Specific with Your Business Goals  Let me guess: Your business goals tied to your website are related to conversions and revenue. At this step of the audit, you'll want to clearly define those goals that a better UX can directly impact. Once you've defined your business goals, include these key questions into your website UX audit checklist: What's my business goal? What's the key user goal? What actions do I want users to perform on my website? What are the top brand values that I want to communicate to my website visitors? What are my key sales channels? Who are my top competitors? Step 4: Perform a Cognitive Walkthrough of Your Website  ... to see things through the visitors' eyes. Try to perform those actions that users come to your website for. And stay vigilant to detect any obstacles that might stop you or slow you down when trying to achieve your "user" goals. Tip! Since you already know all too well how your website works, base the whole process on established criteria. This way, you can keep your focus on those user goals. Step 5: Dive Deep into Your Data Analytics Your website analytics reports make some great insights into how great or... less than great the user experience delivered on your site is. Use it to "fuel" your UX audit with, as it'll provide you with key information on: conversion or cart abandonment what visitors were doing before accessing your website (most common entry points to your website) specific user flows on your site traffic metrics hotspots on your website Tip! Filter your data analytics by specific segments and timeframes.  Source: uxbooth.com Supplement the valuable data that you get from Google Analytics with reports provided by tools like: Kissmetrics Hotjar Crazy Egg Step 6: Determine Your Conversion Rate Performance Is your website an eCommerce one? Then you'll want to take a close look at your sales and download figures as you try to improve your site with a UX audit. Figure out how well your website copy supports the overall user experience and whether your website meets visitors' pain points. Step 7: Identify Your Highest Converting Pages Another crucial point to add to your website UX audit checklist. Why? Because the pages with the highest conversion rate give you an insight into what UX is doing right on your website. They stand for some successful customer journeys that you'll want to get inspired by and... replicate on other pages on your site, as well. Step 8: List Your High-Traffic Pages with a High Bounce Rate "How to perform a UX audit?" One of the essential tasks to add to your "To Do" list is identifying those high-converting pages with a high bounce rate (above 70%). Step 9: Identify Strong Points and... Pain Points in the User Journey Where does the user step off the intended path? Why is he/she failing to take action? It's the strong points in the customer journey (those high-converting pages that you've listed at Step 7 are the best places to look for them) that'll provide you with the best solutions for fixing the weak points identified at this step. Step 10: Take a Close Look at Your Site Layout Your website layout is directly "responsible" for a great deal of the user experience delivered on your website.  So, at this point in your website UX audit checklist you'll want to check specific aspects of your site layout with a direct impact on the visitors' experience: Does it manage to meet visitors' needs? Is your website navigation intuitive enough and easy to use? Is your on-site search accessible enough? Is your website copy in line with the user journey? Step 11: Run a Competitive Analysis How will this help you? You identify your target customers' expectations when interacting with websites similar to yours. That sell the same type of products or services. What's those sites' traffic compared to yours? How usable are they? How well do they rank in the search engine results page? Seize any opportunities that your competitors might have missed. Or get inspired by what they do great in terms of user experience and... do it better on your own company website. Step 12: Organize Your Findings Into a UX Audit Report And use categories like: major usability issues A/B test suggestions challenges predicted impact ... to sort and group your results. 3 Tips to Keep in Mind When Conducting Your UX Audit I've saved 3 best practices for last. Apply them to streamline the whole process and to future-proof your findings. Group all your findings into buckets. It'll bet easier for you (and your team) to interpret your findings when you group them into categories (e.g. the "website navigation UX issues" category) Take screenshots of all the issues found. In other words: screenshot everything! It's the easiest and most effective way to document every aspect (web page, interaction, etc.) of your website with a direct impact on the user experience. Look for trends. Use your spreadsheets of UX findings to identify... patterns. Are there any common conventions and structures that visitors expect to find on your website? That they're already familiar with?   The END! I think I know what you're thinking right now: "But taking all the steps included in your website UX audit checklist takes... ages! And during all this time I'd have to put my team's projects on... hold." Not if you pass on the audit "burden" to us. Just drop us a line and let's uncover all the opportunities for UX optimization on your website! Image by Mudassar Iqbal from Pixabay     ... Read more
Adriana Cacoveanu / Jul 01'2020
How to Improve Internal Site Search and Boost Your Conversion Rate in 12 Easy Steps
They're not there for the looks, you know. Users come to your website to search for... something — a product, a service, information. Its role is to make it easy for them to find that "something" via its search engine. But how to improve internal site search and "shorten the time between query to conversion"? What are some best practices when adding search functionality to your website so that: it serves up the most relevant search results? it reduces user-friction? it provides the best search experience? it helps users to convert faster? Here's your 13-step checklist to an effective on-site search: Why Site Search Is Important?   "Adding on-site search to your website increases conversions by 480%!" (Neil Patel).  Just think about it: The user's found your website (your SEO efforts have paid off). It's something specific that he's looking. Or he at least has some idea of the type of products/services that he's there for. Now, why would you want to make him go over... 5 different pages of results before he reaches that service/product page that he was looking for in the first place? Instead, your website's search engine should help him out with: search suggestions autofills real-time preview of search results Like Office Depot here, whose on-site search engine gave me plenty of search suggestions when I looked for a "chair": Step 1: Put It Front and Center One of the powerful internal site search best practices. But also the most ignored one. Don't be that website owner. Instead, put your search box where users can see it the instant they get on the web page: besides the navigation right below the navigation, as a distinctive element above the navigation in the header Take Zara's example here: how long does it take you to find the search box on this page? Step 2: How to improve internal site search: Make It Easier to Navigate  And what better example than Google's Search Engine itself? You just can't miss it on the page. Moreover, search results are grouped into different categories — images, videos, news — lifting some of the burdens off your shoulders as an online "searcher". It'll even turn your misspelled search queries... Key takeaways: consider using tabs by categories to make the user search experience as breezy possible make the most of keyword matches ... and assistive technologies It's all about shortening the time from the user's query to... conversion, remember? Step 3: Boost Your Site Search Engine with Product Metadata "How to improve search functionality?" By forgetting all about the "meta tags have no impact on SEO" principle and starting to add relevant product metadata. For yes, they do not count for traditional search engines, yet they have a huge impact on the way that your on-site search engine finds any product in your inventory. So "feed" it metadata: titles, tags, attributes, categories, descriptions, specific keywords that your target customers will enter... Step 4: Cater to All Kinds of Searches There'll be users who know exactly what they need. So they'll be typing the exact product/serial number in the search box. And there'll be users who have heard of an innovative, newly launched product in passing and will misspell its name. Make sure your on-site search will serve up relevant results for both types of user profiles: turn the product/serial number into a search criterion make sure your on-site search turns relevant results on "misspelled queries", as well  Step 5: "Fuel" Your Internal Search Engine with Long-Tail Keywords   "How to improve internal site search?" By optimizing your website copy for long-tail keywords (3-5 words). The more you use, the more power you'll inject into your search engine. Let's take this example: You go to Office Depot's website looking for an office chair. Chances are that you're trying to find something more specific than a "chair". You want it to be... grey, ergonomic, made of leather or mesh. You get the idea. You're not looking for a generic "office chair".  Now, switch from your role of potential customer to that of an online owner and start optimizing your website copy for long-tail keywords. They still have most of the search volume. Step 6: Give Users Multiple Filtering Options via Faceting  Add multiple categories to help users filter through generic query results.  This way, you enable them to make their way to more specific results. This internal site search "best practices" becomes a must-have if it's an: eCommerce website with a large inventory ... that you have. A customer won't spend half a day looking for a "green cotton t-shirt for girls size XS", digging through dozens of result pages. Take H&M's example here: they're using faceted search options to help me narrow down my options when I type a generic query like "shirt". Step 7: Tailor the Search Experience As Per the User's Location "How to improve internal site search?" Localize your website content. Or, in plain English: add regional dialect and idioms to your copy. And you'd also want to include "popular searches in your... (name of the region)". The whole idea is to: personalize the search experience, making it more user-friendly help the user find what he's searching for faster (and to convert faster, as well) Even if he's using a dialect-specific word or phrase as a search query. So, start building a list of synonyms for your search queries and use them to improve the search functionality on your website. Step 8: Implement In-Search Filtering Go beyond autocomplete if you want to provide the best search experience to your potential customers. In this respect, advanced in-search filtering is one of the most powerful on-site search features. Take this example: Someone enters "sneakers" in your search box. You'd want to give him/her more search options, more specific suggestions like "sneakers in men's clothes" or "sneakers on sale"... Again, a must-have on-site search feature if it's a large eCommerce website that you have. Step 9: Add Informational Content, As Well Not everyone on your website is there to buy something from you.  Some of them are looking for specific information on your products. So, another effective way of improving search functionality on your site is to you ensure there's enough info-rich content for these users to dig into. Step 10: Serve Targeted Search Results Based on User Behavior Data Here's another answer to your "How to improve internal site search?": Make the most of previous user behaviour to serve targeted search suggestions. Rely on users' profile log information to: identify distinctive patterns and tailor your recommendations accordingly identify regional phrases (e.g. "soda" instead of "coke") and use them to personalize your suggestions Step 11: Give Users More Control Over the On-Site Search Results How? By giving them: categories to filter through their search results drop-down menus brand names that they could use as search criteria a personal search results page where they can keep track of their past activity and use quick search options based on their past behavior Step 12: Serve Relevant FAQs on Every Search Another effective and easy way to optimize search function on your site is to display FAQS at the end of each search This way, users get more information about the product features/price/specific fees/brand that they're interested in. Tailor these lists of questions to the user's past behavior and query data and turn personalization into your most powerful ally. The END! Maybe you do want to increase the conversion rate on your website, but without having to: optimize heavy of loads content for long-tail keywords get tangled up in user data to track down all the regional words variations  write metadata for... hundreds of different product pages We get you. And we've got your back. Just drop us a line and let's improve your on-site search so that you stop leaving conversions on the table. ... Read more
Adriana Cacoveanu / Jun 26'2020
What Makes a Website Easy to Navigate? 11 Best Practices for Organizing Your Website’s Navigation
Quick and easy access to the content they're after is more important for your website users than a... visually-stunning design. Simple, straightforward navigation is what they expect to find. But what makes a website easy to navigate?  What are some good practices to follow to make your website easier to navigate? Here's a top 11: 1. Put Your Navigation Right Where Users Expect to Find It Don't compromise good user experience for the sake of "wowing" visitors with your innovative navigation system. Do users expect to see a navigation bar at the top of the page? Or a navigation menu in the top right corner? Give them that. This way, they get faster access to the information on your website that they're interested in. Tip! Do you feel particularly creative and you want to add multimedia content to your navigation? Make it obvious to your site visitors that those are clickable elements. 2. Tailor the Navigation Bar To Your Own Audience and Business  A navigation bar optimized to meet the needs of a particular audience is what makes a website easy to navigate. So, ask yourself this: What do visitors do on your website? What are they're looking for? More information on some of the services that you provide? Or maybe they want to have a look at the projects in your portfolio and at your previous clients' testimonials? Are they on your website for your blog posts? Once you're done with this empathy exercise and you have all the data, you'll know how many links are "too many" or "too few" for your navigation menu.   Source: Clutch.co  3. Make Your Sidebars Stand Out from the Rest of the Page "How do I organize my website navigation?" You make sure your sidebars don't blend in with the content on the page. And there are many simple and effective ways that you can set it apart from the body copy. Here are just 2 of them: use a different background color for your sidebars use white space strategically to make it stand out from the other elements on the page 4. Make It Legible and Easy to Read on Any Screen  How easy is your website to navigate?  Before you rush in to answer that, make sure you test it for legibility on smaller screen devices, as well. Here 2 of the best practices to follow for legible navigation in all usage contexts: use a font that's at least 12 pixels avoid narrow scripts and fonts break out your navigation into clear categories with up to 7 items use main menu, second, and third-level dropdown menu, as well, to organize your navigation if your website holds a lot of pages 5. What Makes a Website Easy to Navigate? A Fairly Straightforward Navigation Menu  Keep your navigation titles clear, accurate, and easily recognizable: stay away from witty or riddle-like titles. Why would you want to change already familiar title phrases like "About Us" or "Contact Us" and risk to confuse the user? To make him/her lose valuable time trying to figure out "what the poet meant by..."? Just keep it simple and predictable. 6. Make Your Hypertext Stand Out from the Body Copy "How do I make my website easier to navigate?" You make sure that users can tell hyperlinks from the rest of the page content. How? make them bold use another color underline them ... Just make sure your navigation links are 100% usable.  Make it obvious to the users that that is a hypertext and they can click on it. Source: Clutch.co  7. Make Sure Your Navigation Is Fully Responsive  This is, by far, one of the website navigation best practices. And the adjustments to consider for your mobile navigation menu range from:  making the links large enough for mobile phone users to tap on with no effort  to tightening the menu so that it fits smaller screen sizes to using a hamburger menu on mobile devices 8. Mind the Footer  Too often overlooked, the footer navigation has a big impact on the user experience (positive or negative, depending on whether you "forget" about it or not). Just put yourself into the shoes of a user who's just landed on your website: You've scrolled all the way to the bottom of the homepage and you now want to go to a specific service page or product page. Wouldn't it be great if you could access it via a hyperlink placed right there, in the footer? That, instead of going back to the header menu... "But what should I put in my footer?" you ask yourself. You can either: mirror the links included in your header navigation menu or put links to other key pages on your website: contact page, target blog posts, email newsletter sign up, etc. 9. Include Internal Search Functionality  What makes a website easy to navigate? Effective on-site search functionality... Especially if you have an eCommerce website, where users look for specific products/services. Once you've implemented it, follow these tips for making your search bar stand out: use an icon of a magnifying glass insert a "Search Here" text inside the search box use a different color to make it pop out And don't stop there: Merely adding internal search functionality is just the first step. Make sure that the entire search experience meets the user's expectations. And in 2020 users expect much more than just the basic product filters like color, size, and style. They want to narrow down their selection to products that are on sale or to products that have been recently added to the website or... 10. Use Text Links Instead of Buttons for Your CTAs Here's why you don't want to use buttons in your header navigation: it's bad for your SEO: search rankings can't read buttons (but they can read text) they make your navigation look clunky you can't make a specific link stand out from the rest buttons load slower, affecting the overall page loading speed In short, use text for your menu items for both usability and SEO. It's one of the website navigation best practices in 2020. 11. Create a Sitemap for Your Website's Visitors Provide them with a map before you expect them to explore your website. This way, you: make your website more usable for its visitors help search engines crawl in and index your web pages A win-win. The END! With these best practices on what makes a website easy to navigate at hand... what next? How do you implement them on your own website? We're ready to help you create that intuitive and effective navigation system. Just drop us a line. Image by OpenClipart-Vectors from Pixabay   ... Read more
Silviu Serdaru / Jun 10'2020