What Is Product Page

The product page is a page of the e-commerce website that provides a customer with all the needed information about the particular item, allows them to check various options if they exist, and enables a customer to quickly proceed with the purchase process if they decide upon buying the item.

Unlike a real point-of-sale, an e-commerce website doesn’t provide physical contact with an item or assistance from shop staff. Product page becomes the major source of attraction, impression, information, and persuasion. That’s why its design, navigability, and usability play a crucial role in growing sales.

As we mentioned in our guide to the basic web pages, a badly designed product page may waste all the effort (usually massive and complex) taken to bring the buyer to the website and to this particular product. So, besides the attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.

Product page concept for a gardening e-commerce website

Typical Elements of Product Page

Basically, a product page:

• shows the image of the product
• gives all the needed information about the product
• allows users to check different color/model options (if any)
• enables visitors to see the reviews, comments, and ratings from earlier buyers
• allows for adding the product to the cart or wish list
• shows other relevant options.

Additionally, the product page may include such options as a comparison of different items, especially popular on websites selling different devices and appliances.

Product page interactions for Bennett, a tea brand e-commerce

Based on that, here’s a checklist of basic elements of the product page layout:

• name/title of the item
• photo
• price
• item availability
• add to cart/add to bag/add to basket/buy button
• add to favorites/save to wishlist button
• description
• social proof: rating, reviews, the number of previous buyers, the number of people looking at the item now, etc.
• choice of color
• choice of model
• choice of the number of items to buy
• size guide or calculator (for clothes and footwear)
• extended details (materials, technical specifications, dimensions, weight, special features, etc.)

The list above doesn’t mean that all the points are obligatory for any product page. The choice will depend on analyzing multiple factors, understanding the target audience, and careful prioritization to see which points to include and which may be eliminated from the list for this particular type of goods or kind of customer.

Product page first-screen view on Walmart

Design Practices for Product Pages

Visual Demonstration

Ecommerce platforms are the best place to prove the saying that the picture is worth a thousand words. Not able to contact the item physically, visitors will count on the visuals of the product to make their first impression about the goods. What’s more, images are noticed and decoded faster than words; they will be the first element attracting the visitor’s attention. They present the part of the content which is both informative and emotionally appealing.

That’s why many e-commerce platforms:

• use a set of images to present one item from different points and angles
• apply zoom functionality to enable a visitor to look at some parts of the photo closer, see the textures and small details
• combine the photos of the item with photos of it on a model or in the proper environment to give a better understanding of its looks and sizes

Product page first-screen view on Marks and Spencer: a combination of several photos shows the item separately and on the model

The approaches to photo content can be different and depend on both general brand strategy and particular campaign or collection style. However, what unites them all is:

• originality: special shootings are organized to make custom photos that correspond to the style defined in a brand book or specific campaign guidelines
• high-quality: no doubt, the quality of photos directly influences the impression about the particular item and the brand in general
• optimization for the web: being quality, photos shouldn’t be too big as it can dramatically influence the loading time, which in turn has a great impact on SEO; also, pages loading slowly are the solid reason for high bounce rate – unless the website offers something absolutely unique and super exclusive, people will just go away instead of waiting.

Product page for the niche brand of underwear, using photo demonstration on model

Except for images, other media, more complex or interactive, can also be used. Among them, you can now find:

• product videos, detailed video reviews, and instructions
• 360-degree view of the item
• augmented reality technologies helping people to observe the item in their own environment or try it on virtually

The product page of GNO Blankets website uses video demonstration and graphics with detailed demonstration of product layers.

Obviously, these types of media are often more complicated, time-consuming, and expensive in production than photos. So, the decision on their worthwhileness is usually based on the type and price of the offered item. For example, to sell a 5-dollar T-shirt, photos may be enough, but for buying a massively more expensive fridge, smartphone, computer, or even a car, customers need more convincing in the decision-making way. And in this case, expenses on the more complex but more impressive, persuasive, and informative visuals and media could be a worthy investment.

A creative product page concept for a website selling niche accessories applies special realistic effects to the functionality of a model choice.

The pet shop website uses video demonstrations of the items as a convincing way to see how the product works in the environment and sets the needed emotional connection.

Informative but Simple Description

The saying that people don’t read anymore has nothing in common with the product page: when customers are deciding upon spending their money, they do read what they need to know about the product they are going to buy. Still, it’s not the reason to overload the description, as the attention span is quite limited. The description text should be concise, factual, simple, and talking in the language of the audience. It should answer the basic questions: what the product is, what it looks like, what it does, and how it does it. And better to do it from the first lines, which have the highest chances to be read, instead of filling them with standard marketing hooks shoppers are already sick and tired of.

Another rule of thumb here is connected to the previous point: show, don’t tell. Well, it’s better to say, tell, but also show! Don’t just describe in detail how the bag looks inside – show the photo. Don’t just tell how beautifully this neckerchief matches that jacket – show the photo. Don’t just mention the size of a toy – show the child playing it. Combine the power of words with proper images to make the experience much more effective.

Product page first-screen view on Uniqlo: the page features a concise and informative description of the item and puts the details on materials and care in another tab, both in the pre-scroll area of the page. Another good thing is a clear definition of model size on the photo, allowing the customers to instantly understand the proportions.

The product page for the cosmetics website uncovers the information about the product gradually, with the core data above the fold, supporting the prominent item visualization; the split-screen approach helps to divide visual and text zones to make them easily scanned.

Super Obvious Call to Action

Calls to action (CTA) should be instantly noticeable. In e-commerce interfaces, CTA elements are the core factor of effective interaction with the product; they play a crucial role in usability and navigability and, therefore, in getting profits. When all the path of interaction and transitions is built clearly for users, but the CTA element is not obvious, misplaced, or designed badly, the risk gets higher that users will get confused and need to make an additional effort to achieve their goals – which is annoying. Therefore, the risk of poor conversion rates and bad user experience grows.

ASOS product page first screen: the CTA button differs from everything else on the page due to color contrast and is instantly noticed in the light, airy layout.

Focus on the Item

No doubt, thinking about the layout and content of the product page, both stakeholders and designers feel the urge to fill it with everything possible, and even more, to make the page super informative. However, be careful as this strategy may do a dirty trick: in that flood of information, the focus gets blurred, and visitors can get too distracted to make a decision. How to find the balance?

On the one hand, it’s recommended not to overload the page with a great deal of information that will overwhelm customers and distract their attention from the major goal – to make the purchase. On the other hand, visitors aren’t ready to jump from one page to another to get different information about the item they are interested in. Therefore, the designer has to take the time for thorough research on the issue, prioritize carefully, and find the balance of data that needs to be provided on the product page.

Is there a golden rule for all e-commerce websites? No way, as different customers and markets have different needs, and the type of the product also influences the choice of core and secondary information to show. The analysis of the target audience and user testing can give clues on what information is required for the specific categories of items or services.

Creative product page design for a niche perfume website focuses on item presentation amplified with an atmospheric video background and special effects.

The more pricey, uncommon, or innovative the product, the more information the customers usually want to get about it. And even for common stuff, there may be tons of questions and hesitations. Sure, all the needed information should be accessible from the product page, and the challenge for UX designers here is to find a way to organize it properly. Technical details, materials, weight and size, size chart or calculator for clothing and footwear, functionality for comparing the item with a similar one, and so on and so forth – any of those details can play the premier violin in a story of a particular item.

Use the principle of the inverted pyramid and uncover information gradually, from the most important and demanded shown first to more and more specific details unveiled further.

Instead of creating intrigue, be open, direct, and clean in content presentation.

Try to put all core information in highly readable form on the above-the-fold part of the page.

And test, test, test again, analyze the time on the page, heatmaps, and clicks, ask and analyze to know what buyers really need and what makes shopping convenient for them.

The product page on Amazon is based on the principle of the inverted pyramid: this above-the-fold view shows the core information and functionality buyers want and need to know about this type of product first of all. Engaging social proof is marked by the label of #1 New Release and shows what other products are often bought together with this one.

The second screen uncovers more about the actions of other customers interested in this theme: two sections, visually attractive due to the focus on product images, uncover other items customers view or buy.

And only after that, when scrolling further, users can find extended information, editorial reviews, etc., based on text without visuals.

Intuitive Navigation

Every button, link, and card design can change the conversion rate significantly. It’s vital always to remember: in the intense competition we observe in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations or efforts to understand where’s what they need. What they do demand from e-commerce is an experience that is faster, easier, and more convenient compared to going to the actual store. If this website doesn’t give it to them, they will look for it somewhere else.

So, adding to obvious CTA, make sure that users can effortlessly do common steps, for example:

• find search field
• use breadcrumbs helping to quickly understand the current position in the website hierarchy and probably take a step or two back instead of just going away
• be totally sure which elements on the page are clickable
• see if the item is already in the cart
• see the number of items in the shopping cart or bag (usually in the website header)
• use the power of visual dividers and common directional cues to perceive the information faster
• find the contact information and navigation links in the website footer

Product page first-screen view on Target: multiple photos of the item, both clean and integrated into the environment, clear and instantly noticeable controls for choice of color, the obvious search field in the header, breadcrumbs creating the secondary navigation level, social proof in the form of ratings and questions, and clear call-to-action element.

Consistency

Consistency means that the product communicates with the user in the same or similar way, whatever point or channel of communication. In terms of user experience, it means that similar elements look and function similarly, this way reducing the cognitive load and making interactions smoother and more intuitive.

In e-commerce interface, it touches both:

Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages or screens of your product colored and designed the same way, visitors can learn fast and will be able to quickly distinguish them at any step of their user journey.

External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products or underline the text links to give users a hint that they are clickable.

Sephora product page first-screen view: expected navigation in the website header, easily recognizable for e-commerce shoppers, super obvious call-to-action button, arrows used as the clearest directional cues for most users around the web, focus on the item presented in different visuals and highlights important and influencing decision-making for the target audience.

Power of Known Patterns

Adding to the previous point, UX designers would better never underestimate the power of habit. In UI for e-commerce, especially in the red-ocean spheres, the primary goal is not to shock and awe. Basically, UX designers become a friend or at least supportive shop assistant who greets visitor, guides them around the store, takes a right to the items they want, and make the checkout as fast and simple as possible. To make that all possible, designers should base their decisions on how actual customers behave.

There are many articles and videos calling creative people to hear their hearts, trust their guts, and think out of the box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it’s a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to purchase.

The power of habit plays a big role in the products of this kind. Choosing a layout, menus, or icons that stand too far from the ones users are generally accustomed to often brings confusion and frustration. For a simple example, the usage of any other image instead of a magnifying glass to mark the search field can result in a bad user experience as buyers know that visual symbol and will look for it. If you are ready for such experiments, take time to test them well and ensure that customers are ready for them, too.

H&M product page design is based on a minimalist approach: the first-screen view is designed around prominent images, model choice options, elegant and readable basics (product title, color name, and price), a heart icon as a well-recognized visual trigger of adding the item to favorites and a noticeable CTA button. Even the size options are hidden in the dropdown menu to put the number of controls to a minimum and focus all the attention on the visuals. Sure, it means additional clicks and scrolling; however, the approach may be reasonable and effective if the customers are used to this flow and appreciate this particular style, consistently reflecting the brand image in general.

In the article on home page design strategies, we mentioned that the website is made not for creative contests or galleries of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish for revolution. No doubt, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of a revolution might scare and provoke hesitations: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning; support them with text labels where needed. Strive for the balance between innovation and traditions.

Narrowing the focus, we may also talk about the power of habit for a particular e-commerce website. You could have read numerous reviews of the “poor UX design” of this or that e-commerce giant, breathing fire and brimstone into old-fashioned solutions or complex navigation. However, thinking deeper, it’s easy to understand that they activate the power of habit as a major approach of respect to their buyers, as plenty of their customers have been with them for many years. It’s not because they don’t know how to change; it’s because, at some stages of business development, the cost of change may be too high. It doesn’t mean that the changes are never made; they are just not as revolutionary and made in small steps.

Product page above-the-fold view on Etsy marketplace

Scannability and Skimmability

It’s already well-known that when coming to a website or app, users don’t usually read and observe all the content on the page or screen. Instead, they start with quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements into the zones of high and natural visibility. Other factors making product pages scannable are readable typography and enough white space.

There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds, or pages loading for ages – any point of that stuff can spoil the experience quickly, distract users, and move them away, sometimes even without a clear explanation what they didn’t like. Details matter; think over them and organize them well.

First-screen view of the product page on George: due to the light, airy layout, the page looks clean and simple, but at the same time, it’s highly informative even at the stage of fast scanning.  

Dark, elegant, and catchy product page for the neon signs shop, balanced and scannable

Fewer Clicks

If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every user’s click possible. Too many operations are tiring and annoying, which is a kind of negative emotion. And emotions have a huge impact on user experience and make retaining users much harder. Minimize the number of clicks on the way of choosing and buying whenever it’s possible – this way, you respect the user’s time better than the politest words of thanks. For example, avoid dropdowns for a small number of choices in basic options such as color or model choice.

Product page first-screen view on Sportsdirect website: no information is hidden in dropdown menus, so it’s super easy to scan the availability of models and sizes, the CTA is seen immediately, the number of items is changed easily by typing or manipulating plus/minus controls, arrows show how to see more images, and breadcrumbs help to jump back to choosing other items easily.

Exotic Fruit e-commerce app uses a tab for adding the needed number of products with a simple tap.

The OldNavy product page integrates the section of offered combinations with other items from the website, and it is not just an image to get buyers inspired: on hover, the shopper gets the list of links to items with basic information, which enables them to easily get engaged in further shopping and makes the relevant product accessible quickly.

Social Proof

Social proof is a big factor of impact on the decision-making process in both the physical and digital worlds. It is a psychological and social phenomenon of people copying the actions of others to undertake behavior in a certain situation. This term was introduced by Robert Cialdini in his 1984 book Influence; the concept is also called informational social influence.

In e-commerce, the experience of the previous buyers influences the behavior of the next ones greatly; that’s why ratings, comments, and reviews are needed, especially on mass-market platforms. They help customers feel united with a group of similar buyers, which is easy to feel in the actual store among other shoppers but even more needed in the online shopping experience when you are shopping alone in front of a computer or mobile screen. What’s more, reviews can answer the questions the customer has and, this way, support the positive decision about buying – or prevent from buying the wrong item and having a negative experience.

Here’s the product page on OldNavy: the first screen view, among all other details, includes the social proof showing the rating of the item with the number of people that marked it. Scrolling down, buyers are getting even more engaged: except for relevant products to combine this item with for the perfect outfit, the page uncovers the relevant items other customers looked at and liked, and further customers’ photos and details on reviews.

Interactivity

With more and more buyers online, brands and retailers can analyze more data about their behavior, needs, and wishes and integrate new approaches on that basis. Interactivity that imitates seeing the item from different angles and manipulating it, trying on the clothing or footwear, testing the make-up options on your face, virtually placing the piece of furniture or decor into your room – all that and diversity of other innovations are becoming more and more accessible and affordable due to the creativity, customer experience care, and new technologies. And sure, they help customers to make a decision.

Another vital aspect of interactivity in e-commerce now is personalization and customization, when people can customize their purchase instead of just choosing it from the catalog. Choosing a custom combination of flowers for a bouquet, customizing the burger or pizza with favorite ingredients, collecting a personal outfit or family look instead of just buying ready-made ones – able to add their own personality to the offer, many shoppers feel ready to buy.

Tasty Burger app allowing for creating custom burgers to buy

Mobile Adaptation

Needless to say, there are many daily things people do with their smartphones nowadays, and shopping is becoming one of the top options. Besides, mobile adaptation is among the core web vitals of search engine optimization. If you want an e-commerce website to be googled successfully and let the visitors have a seamless shopping experience from any device, make the product page mobile-friendly and reconsider the layout to make the interface convenient and navigable for mobile devices. Some e-commerce platforms go even further and also invest in creating their native applications for iOS and Android, but for many small businesses, it may appear not affordable or even not reasonable. Anyway, the product page, as well as the rest of the website pages, should be responsive and mobile-friendly, no matter if the native app exists or not.

Minimalistic product page for a fashion brand e-commerce focused on photos, easy choice of color, and responsive to be used on any device

404 Error

With product pages intensively used and often updated, there are different cases of running into an error. People can accidentally mistype a letter in the URL, or the page they saved before may not already exist as the product is already out of stock. Make sure not to let customers come across an empty error page and go away. Connect them to other pages, offer relevant options or categories, and do everything to take advantage of the error page involving a customer to check something else.

404 error page for a fashion e-commerce website

Bottom Line

Sure, the decision on the design practices to choose for a particular e-commerce project is a matter of thorough thinking, and the solutions on what to use and what to leave will be based on many subjective factors, from the type of product and market segment to the company budget, employers’ skills, individual tastes and specific needs of the target audience. The approach to mass-market e-commerce differs from the approach to a narrow niche. The approach to various generations of customers will be different.

Yet, all the practices mentioned above won’t work properly if the major condition of the commercial world is not followed, which is: the product should be good above everything else. All the other steps, investments, and practices make sense if the website sells quality goods and makes a website or app its channel of sales, not the place of lies and tricks.  Anyway, if the products you offer are good and the customer is already on the website, let the product page show the item in its best light and help the shopper to feel it like home, convenient, clear, and friendly.

Useful Articles

Here’s a bunch of articles to dive deeper into the themes of e-commerce, web usability, and user experience design.

UX Design for E-Commerce: Principles and Strategies

11 Profitable Strategies for E-Commerce UI Design

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target

Product Page Design Inspiration: 17 Ecommerce Web Designs

Design for Business: User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

5 Basic Types of Images for Web Content

Web Design: 16 Basic Types of Web Pages

Error Screens and Messages: UX Design Practices

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Product Page Design: Best Practices on UX for Ecommerce появились сначала на Design4Users.

Every field of human activity witnesses the people who become Big Masters of the trade. Due to their talent, hard work and devotion they create, discover, invent something that starts a new epoch of the industry and inspires plenty of other professionals. Talking about advertising, among those remarkable people, whose names are remembered on the top of the list, is David Ogilvy, one of the most famous advertisers all over the world and the author of the books now called the Bible for the advertisers. Being an experienced specialist and the head of the advertising empire, he was deeply acknowledged in mass trends and narrow peculiarities of human psychology and methods of influence on human behavior.

Here we have gathered some well-known professional tips David Ogilvy gave to professionals in the advertising sphere. Let’s try to consider if they are applicable and if so, how deeply they can be implemented into the field of web and app design.

1. Advertise what is unique.

To make advertising campaign successful, it would be great to advertise a product that is completely unique. However, with more and more development, there are relatively fewer and fewer unique things, so there is another side of this trick: find something that is unique about the product and make the customer know about it; make the product look original or feel original. You can create the product which has nothing extremely original in its heart, but having a tailor-made feature will make your product stand out of the crowd. This could be new operational feature, interesting elements of design, interactive elements, thoroughly thought-out logic of user experience. If you design a fitness app, a reader application or a messenger, you must be aware that the product is not original itself and it is vital to create (find, discover, invent and so on and so forth) the feature which will make the product standing out of competition. Otherwise, you will not succeed in getting and retaining your audience.

Therefore, two things are to be included in the bottom line here: analyze your competition and find the unique side of your product before you start your work on design.

Singify App

2. Every word in the copy must count.

Talking about the sphere of web and app design, it depends on the essence of the content you analyze. However, in most cases, it really works like this. If we are talking about the elements of layout which contain copy (buttons, links, menus, and the like) as well as the headlines, bullet points, copy of the landing pages, and calls to action of any kind, that is absolutely right advertising rule to follow in web and app design to create pleasant, easy and positive user experience as well as high conversion rates.

On the other hand, if we are discussing a sort of longer content with more copy, like blog posts, for example, you may need to reconsider this rule a bit. Here you should remember that the so-called “dehydrated” texts created only for search engines but not for living readers will definitely make every word in the copy count; nevertheless, they won’t create a positive user experience. This sort of copy will be too mechanical, too non-human, to make your readers get interested in the content you provide, even if the information you offer is really meaningful. So, in this case, analyze your target reader and add a little “water” – some words, which will make your text not only full of keywords, but also natural and involving.

So, the bottom line here is like this: For short copy in short and key elements of the layout, follow the rule and never forget it. For longer copy, let every possible word count unless it makes your text unnatural, boring or lacking in readability.

Moreover, for web and app design this rule can be observed wider, beyond the limits of copy. It could be transformed as “Every element in the interface must count”. And that will be one of the vital things to bear in mind for any designer working on any project. The most successful interfaces with efficient layout and encouraging user experience always hit the point. If there is something in the interface that does not fulfill any need, aim or function, don’t apply it in the app or website and you’ll make your users happy.

Toonie Alarm Tutorial

3. Never write an advertisement you wouldn’t want your own family to read.

This position is rather contradictory when transferred on web/app design. Being a designer, you can get involved in a project which you cannot even imagine in connection with your family. Honestly, it’s sometimes hard to imagine your granny building up online civilizations or using the fitness app, and that is not the reason why you shouldn’t be involved in creating them. However, the basic message here could be much broader: creating a product, try to work it out so thoroughly and passionately as if you were making it for close people. In this case, you will create something having a part of your soul, and the user will feel it.

The bottom line here: You wouldn’t like your close people to use a bad and low-quality product, would you? Then don’t make other people’s families try bad products as well.

Organic Landing Page

4. On average, five times as many people read the headline as read the body copy.

The numbers can be a bit different, but the core is the same. People usually do not read text blocks immediately; they first scan the pages to get a general impression. In case of a web page or application screen, the term “headlines” transforms into a range of layout elements, including not only headlines themselves, but also call-to-action elements, links, forms, branding elements (like logo and/or lettering compositions for names of products) and bullet points. All their features (copy itself, form, color, location, surrounding elements) influence a lot on the efficiency of your product and the response you’ll get from the users.

One more thing Ogilvy emphasized about copy was about style and vocabulary: “Don’t address your readers as though they were gathered together in a stadium. When people read your copy, they are alone. Pretend you are writing to each of them a letter on behalf of your client”. Obviously, it is right for the stuff created by app and web designers. Success usually favors the ones who create something practical, useful and stylish rather than pathetic and immortal.

The bottom line here: all the content on the page is important and precious, but not all the content is instantly perceived. Optimize the priorities like headlines and call-to-action elements if you want to involve the audience into the rest of content.

Slopes Website

5. If it is something important, get a colleague to improve it.

In one of our previous articles we have already mentioned the stereotype about designers when people expect them to be the specialists who give out the best result working alone. Sure, there are professionals for whom that is the only right way to work. If you are one of them, you can miss the rest of this paragraph. However, our experience shows that techniques of collaboration, discussion, brainstorming and teamwork increase the productivity and quality of the projects. So, in web and app design this secret works the same way: if you think not only about yourself and your own fame, but also about the general success of the company whose part you are, working together with other keen designers can give unexpected and amazing results. They – that is most important point! – will satisfy your customer and create interesting experience for users. Everybody is happy, period. Sure, this secret works only in case, when you work in a real team, not in a can of worms, so there can be deviations from this rule.

The bottom line: working in a team of soul mates, don’t hesitate to collaborate and ask for advice. Keeping deadlines, satisfying the customers and creating high-quality final product – it’s not only about you. It’s about your team, your company, your reputation.

Brainstorming session at Tubik

6. The most important word in the vocabulary of advertising is TEST. Never stop testing, and your advertising will never stop improving.

Time changes, media change, activities change, but the significance of testing never dies. Talking about web and app design, Ogilvy’s words seem to be the pure truth. Creating the product is not the end of the road. It’s only the start, after which you need to test your product through numerous iterations and only testing will make improvement possible. Creating and supporting a web site or an application without testing it on real users is just a theory and you will never be able to tell if it’s successful or not before people start using it, making mistakes, revealing bugs, being confused by unexpected schemes or overwhelmed with abundant content and providing you with more and more hints how to improve your work.

The bottom line: It’s not easy to create the design which is close to perfect. But, be sure, it will be inaccessibly far from perfect if you don’t test it both before the launch and afterwards.

Tubik developers testing the screens for a mobile application

7. Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.

Again, it is one more thought by Ogilvy, which is totally truthful for the sphere of web and app design. Designers who start creating a product just at once when they get the task are quite risky guys. There are plenty of things to do before the designing process itself. Ignoring those things can give the interesting but not viable result. It’s important to analyze the competition, to understand the target market, to find out the sources of traffic and potential expectations of the users before setting off. Otherwise, you can waste much more time on loads of inefficient variants.

The bottom line: don’t be lazy to research vital points of the project before you start designing. Don’t fancy doing the research? No problem, go to duck and dive in loads of baseless concepts instead of going along the solid path of understanding the user’s needs and wishes. Just don’t forget: it’s not you who decides that the product is successful; it’s not even other designers. It’s users.

Researching, analyzing, optimizing

8. If it doesn’t sell, it isn’t creative.

The famous advertising genius explained: “When I write an advertisement, I don’t want you to tell me that you find it ‘creative.’ I want you to find it so interesting that you buy the product”. It is a precious thing to remember in web and app design as well. You can create an absolutely fascinating concept, deeply artistic and highly aesthetic, it can look stunning and stylish. It can be unique, original, creative and a hundred more positive characteristics. However, if it doesn’t work properly, if user doesn’t understand how to use it, all the other positive features of the product die immediately.

The bottom line: don’t forget the eternal verity by Steve Jobs, who said that design is not how it looks but how it works. Going too far in creative search can take you too far from the users of your product. If the product doesn’t sell, i.e. for design doesn’t function properly, not giving you desired conversions, you risk to become the only person who will understand all its greatness.

Restaurant app

9. The more informative your advertising, the more persuasive it will be.

Applying this idea to the sphere of web and app design, we can be sure that it works the same way. The more applicable and practical your product is, the more persuasive and therefore self-promoting it will be. It doesn’t matter if you create a site, a landing page, a UI/UX for the mobile application. All the cases will show you the same: make your product useful and efficient – and it will make itself desirable without any other persuasion.

The bottom line: don’t use the words to convince people you are talented and your product is great and efficient. Informative product with high level of usability will do it for you, so let this be your aim.

Sport App 

10. I never assign a product to a writer unless I know that he is personally interested in it. Every time I have written a bad campaign, it has been because the product did not interest me.

Somehow, this is the thought to consider for the sphere of web and app design as well as for advertising. Sure, we all occasionally have had assignments that are not from the sphere of our interests. However, it would be better if those projects remained the occasional accidents rather than your designing routine. No doubt, designers can be and should be versatile, and responsive and there is nothing impossible for talented people, and so on, and so forth. But it is vital to remember that creating good design (as well as a good advertisement or commercial) in its best expression means putting a part of your soul and passion into work. It is very hard for the vegetarian to put his soul and passion into the application about cooking different kinds of meat as well as it is not easy to make an efficient library application for a person who hates reading. Sure, it is not so simple like that and even in this case a designer will be able to adapt and give the result. Nevertheless, it is under question if it is going to reveal all the depth of their talent. So, in this case designing teams have a kind of benefit, as more designers in a team mean more interests, more outlooks, more ideas and thus more efficient design.

The bottom line: Be confident that you are talented enough to do anything you are assigned to. However, if you are interested in the topic, you are going to be much more productive. And for the heads of design agencies, delegating work on the basis of not only technical skills but also interests and passions can make wonders out of creative work.

Museu Landing Page

Useful Articles

Here’s a set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Advertising Rules to Design Good UX появились сначала на Design4Users.