The Analyst

10 Notes for eCommerce site UI / UX

The Analyst's photo
The Analyst

According to the CEO of Amazon, Jeff Bezos, if you build a great experience , customers tell each other about that. Word of mouth is very powerful. So, UX design plays a pivotal role in the success or failure of any ecommerce activity, and it is not just limited to aesthetics.

  • Clear micro-interactions
  • Fast feedback from the system
  • Attractive product presentation
  • Easy payment flow
  • Operational simplicity
  • Product promotion
  • Security of user's data

Simplified & Intuitive Product Categorization.png

  1. Branding is a crucial thing:
    1. It allows for providing a product, company or service with a recognizable face and personality.
    2. Branding means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market.
    3. If stakeholders want to use the digital product as the additional flow of customer attraction, then branding tends to be essential in an eCommerce user interface design.
    4. UI Designer works on the interface, its color palette, shapes, typefaces and fonts, illustrations and icons.
    5. UI Designer consider design solutions appropriate and corresponding to the general branding concept of the product.
    6. Header present the area of high visibility.
    7. A splash screen or welcome screen is the first screen seen by a user while the mobile application is loading and starting. It's a good idea to use a logo, mascot or any other thing setting the instant visual connection with a brand. Moreover, adding a bit of wow-effect with slight stylish animation, it's easy to make the sign even more attractive and memorable.
    8. Elements that show the flow of the current loading process on the app or website. UI Animation can add much to the consistency of both UI and identity design.
    9. Mascots are images, usually personified, which often represent the brand, product or service identity and can be its symbolic convention in all the application or website.
  2. Clear and easy navigation
    1. What page they are at
    2. Where the menu is
    3. How they can get back to home page or catalog
    4. where the search and filters are
    5. how long the page-loading process is going to take
    6. how they can see the detailed information about the item
    7. how they can choose between the option for the same item (color, size, etc.)
    8. how they can pay for the item
    9. how they can save the items they would like to get back to later
    10. how they can contact the seller
    11. how they can see the rating and reviews of previous buyers
  3. Scannability of the page or screen
    1. Eye-tracking models
    2. Gestalt principles
    3. Laws of visual hierarchy
    4. CTA Elements are the core factor of effective interaction with the product.
  4. Interface to save user's efforts
    1. show related products
    2. strive for a minimal number of clicks
    3. simplified sign-in process
    4. user shape and color marking to group the items
    5. perception of the layout is natural and harmonic for the human eye
  5. Website is made not for creative contests or gallery of fame, but for real users
    1. habit is stronger than the wish of revolution
    2. too much of revolution might confuse and scare
    3. check that all icons on the screen don't have a double meaning
    4. strive for the balance between innovation and traditions
  6. Use landing pages when you need to concentrate user's attention on sth specific
  7. Home page
    1. nature of the website
    2. brand & company identity elements
    3. internal search
    4. links to the core interaction zones
    5. contact data
    6. links to social networks
    7. sign of trust (testimonials, reviews)
    8. visual presentation(s) of best selling, exclusive items
  8. Images give message
    1. Theme photos for appropriate mood and setting the message
    2. Illustrations look both informative and original
    3. Hero Banners catch user's attention in the initial seconds of interaction
    4. Icons support data exchange between the informer and addressee.
    5. Visual identity element & mascots
  9. Promotional videos
    1. introduction
    2. product presentation
    3. landing page
    4. testimonials
    5. entertaining & educational
  10. Gamification
    1. Stimulate users' extrinsic motivation
    2. Tangible rewards:
      1. money
      2. prizes
      3. diplomas
      4. certificates
      5. trophies
      6. medals
    3. Intangible rewards
      1. praise
      2. support
      3. recognition
    4. Challenges
    5. Leaderboards
    6. Rewards for loyalty, big orders, discounts, badges, coupons, stickers