Lecture 11 - Enhancing The User Experience (UX)

CIT-647 E-Commerce Applications Development
Welcome to
E-Commerce Applications Development
Lecture # 11: Enhancing the User Experience (UX)
Rana Ahmad Ali Tabassam

Department of Information Technology
University College of Management & Sciences
Khanewal, Pakistan
a.tabassam@gmail.com
© 2022-2023 by Ahmad Ali Tabassam. Some rights reserved.
valid with
23/01/2023
oral explanation!
Outline
 Product Variant and User Uploads,
 How the variant are applied previous
lecture
 Why Product Variants are Helpful to E-Commerce Stores?
 Enhancing the User Experience (UX)

 Why it is so important for online stores?
 Discussing user experience one-by-one
CIT-647 E-Commerce Applications Development Lecture # 11: Enhancing the User Experience (UX) 2
What is the User Experience (UX )?
 User experience is defined as a person’s sentiments after using a system,

product, or service. Similarly, eCommerce user experience is defined as the
overall experience of the user after interacting with your eCommerce site.
It’s all about how visitors feel when they go through your online store and
how easy it is for them to perform the desired action.
So, apply the concept of user experience design when you are building
your eCommerce website.
 But what is UX design?

User experience design can be defined as a sympathetic approach to
design where the needs and objectives of the end-user are taken into
consideration.
But…
Why is eCommerce UX so important for online stores?
Why User Experience (UX )?
• Allowing customers to search the product catalog effectively
• Enhancing this search by allowing our customers to filter products
• Providing wish lists for our customers

• Informing customers when their desired products are back in stock
• Generating recommendations for customers based on previous

purchases
• Enabling social aspects such as product ratings and reviews from
customers
Why Customer Experience?
• Find out popular and wanted products
• Analyze customer trends
• Planning e-commerce products
• Customers know merits and demerits of any products
• Helps to increases revenue and sales
• Improves customer satisfaction
To enhance customer experience facilitate

customers as more as you can
Search
• Search and filter products is vital in framework
• Why?
– If they cannot fid what they are looking for
• Customer will be frustrated by our site
• Go somewhere where they can fid what they are looking for much more
easily
• There are two methods of search
– Keyword Search: search based on keywords
– Filtering: Search based on listing product attributes
Keyword Search
Based on Keywords
Applies all metadata and complex

algorithms to the search
More complex, because you have

to rank the best results first
No matter how data

model is?
Answers to 20% of users

needs to find
Filtered Search
Based on product multiple

attributes
Filter criteria should correlate

with the data model.
Known as Advance Search
Answers to 80% of users

needs to find
Search Implementation
• Easy way is to search the keywords from product name and product
description fields
• To make the results more relevant
– We can place different priorities
• Result is more valid if keyword is in both fields
• Is also valid if keyword is in name field
• Least valid is if keyword is in description field
• We need following 3-things
– Search Box: to type keyword to search
– Search Feature in Controller: code for searching
– Search Result: template for viewing search results
Search Box-Template
Search Box-Controller
Mytasks.net
Mytasks.net/view
Mytasks.net/search
Mytasks.net/someelse
Our Search Function
• Working of search function is as given:
– Customer has actually entered some phrase to search
– Clean the search phrase
– Run the query from database
– Name and Description is checked with search phrase
– Show priorities results
– SearchFunction.php
Search Results-Template
Improving Search Results
• We can improve our search result by changing our search template
Filtering Products
• Filtering allow customers to better find the products they are looking
for
• Filtering products are based on product attributes
– Like price ranges, manufacturer, weight, brands etc.
• Price range filtering is simple enough
• But with product attributes, we would need
– To extend the database and models to maintain this additional
information
Filtering Products
• There are different ways in which we can store filtered results:
• In the user's session: This will be lost when the user closes their
browser
• In a cookie: This information will stay when the user closes their
browser
• In the URL: This would allow the customer to filter results and send
the link of those results to a friend
• In POST data: The information will only be stored for the one
instance the
filter is used
Store Filtering Results in URL
• We are trying URL method
• We format filter data within the URL as
– filter/attribute-type/attribute-value-ID
• For example for two attributes, URL can be:
– Domain.com/filter/price/5/filter/weight/6
• How it will work?
– we can simply iterate through the bits of the URL
– find bits containing filter
– then take the next two parts of the URL
– Filter down(query to DB) the product based on parts
Database Changes for Filtering
• We need three new tables to for effective product filtering
• An attribute types table:
– To manage types of attributes; for example, price,
weight, brand, manufacturer, color, and so on
• An attribute values table
– To manage values and ranges of attributes; for
example, <$5, $5 - $10,<5 KG, Nike, Adidas, gold, red, and so on
• An associations table
– To associate products with attribute values
Attribute Type Table
Attribute Values Table
Attribute Values Table
Attribute Association Table
• This table will have only two fields
– Product ID and Attribute ID
Filter Options
• To enable Filtering in framework we need to
– Build a list of attributes
– Build suitable URLs based on the attributes
– Display them within the product list view
• We need nested loops
– One for generating headings and empty lists
– 2nd to insert the loops of values into these lists
Filter Options
• Step-by-step process for filtering options

– We query the database for attribute types
– We cache the results of this query
– The cache is associated with a template tag
• Building empty list and showing on template
– We query the database for all attribute types
– We iterate through the results, putting each value into an array for its
corresponding attribute type
– For each attribute type, we cache the array, and assign it to a template
tag
Filtering Product Template
Improving Filters
• Displaying the number of products matching a filter next to it
• Pagination—limiting the number of products displayed on a page
• Filter options with no matching products could be hidden
Reading
– PHP 5 E-commerce Development, Michael Peacock, 2010.

 Chapter 5: Enhancing the User Experience
CIT-647
IT-4xx E-Commerce
E-CommerceApplications
ApplicationsDevelopment
Development Lecture # 11: Enhancing the User Experience (UX) 27
Q&A

Lecture 11 - Enhancing The User Experience (UX)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 11 - Enhancing The User Experience (UX)

Uploaded by

Copyright:

Available Formats

CIT-647 E-Commerce Applications Development

Rana Ahmad Ali Tabassam

© 2022-2023 by Ahmad Ali Tabassam. Some rights reserved.

 Enhancing the User Experience (UX)

 User experience is defined as a person’s sentiments after using a system,

 But what is UX design?

• Providing wish lists for our customers

• Generating recommendations for customers based on previous

To enhance customer experience facilitate

Applies all metadata and complex

More complex, because you have

No matter how data

Answers to 20% of users

Based on product multiple

Filter criteria should correlate

Known as Advance Search

Answers to 80% of users

• We can improve our search result by changing our search template

• Step-by-step process for filtering options

– PHP 5 E-commerce Development, Michael Peacock, 2010.

You might also like