ACS 3907 E-Commerce · –UX Case Study: Process of Information Architecture by Soojin Sielle Kim • Budget constraints –Usability design not often highly prioritized • Summary:

©Bowen Hui, Beyond the Cube Consulting Services Ltd.

ACS 3907E-Commerce

Lecture 4-2

Instructor: Kerry Augustine


E-Commerce Site DesignHuman-Computer Interaction (HCI)

2


Human-Computer Interaction (HCI)

• A subfield of Computer Science that studies the design and interaction issues between systems and users

• Main focus:– New interfaces

– Interaction techniques with new hardware

– Design principles

• E.g., provide user with visual (and audio) feedback

• E.g., let user maintain control

• E.g., “recognition” rather than “recall”

– Comparison of new techniques

– System evaluation methodologies

3


Usability

• A quality of the system based on user feedback on how easy the system is to use

• Aspects of users’ opinions:– Subjective

– Formed early, based on “first impressions”

– Context specific – based on tasks, context of use

– Relative to existing trends and standards

• Importance of usability:– Support users in carrying out tasks (productivity)

– Improve user satisfaction of the system

– Increase user acceptance and loyalty

4


User Centered Design (HCI) User Experience (UX)

5


User Centered Design

• User experience design is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.

• User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. (Source)

• Donald A. Norman coined the term user experience when he was Vice President of the Advanced Technology Group at Apple in the mid-1990s.

• “I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.”– Donald A. Norman (Source)

6

https://en.wikipedia.org/wiki/User_experience_design

https://en.wikipedia.org/wiki/User_experience_design


User Centered Design

• Easy to learn

• Easy to use– Minimal information/cognitive load

– Minimal navigation/simple site structure

• User control– Adaptive – changes on user behalf based on observed behaviour

– Adaptable – lets user make changes

• Efficient/increase productivity

• Consistent with standards/trends– Affordance = quality of object that allows users to perceive certain

actions are possible

– Predictable – same every time

7

©Bowen Hui, Beyond the Cube Consulting Services Ltd.8

User Centered Design (cont.)


User Centered Design (cont.)

• Accessibility = provides equal access and equal opportunity to everyone– Technological gap

– User skills (e.g., disabilities)

• Error prevention– Tolerates variety of user actions

– Instructions and error feedback are clear

• Help documentation– Easy to find

– Always available

9


User Centered Design Process

1) The PROBLEM – There is a reason for a grandfather to say “Necessity is the mother of invention.” Something causes us so much trouble that we cannot stand it. So, we make tests, talk to people, conduct desk research, trying to understand in many different ways the reasons behind the problem and start to…

2) DESIGN a solution. This is the time when we come up with how the solution should work and what it should do. When we know enough, we build the prototype and…

3) TEST it with a few people who have a similar problem. If we are lucky, not all of the design should end up as trash, so we improve the prototype…

4) BUILD it and…

5) LAUNCH our solution and make it available to people who have the problem. After some time we…

6) LEARN if our solution was useful or not.

10

©Bowen Hui, Beyond the Cube Consulting Services Ltd.11

User Centered Design Process


Lean UX Design Process

1) Understand the PROBLEM,

2) DESIGN the solution,

3) TEST the solution,

4) LEARN if the solution will be useful for the users. If yes, proceed to point 5, if not, go back to point 2.

5) BUILD the solution,

6) LAUNCH it.

12


Lean UX Design Components

• Presentation– Language and content: jargon,

specialized terminology

– Spacing, colors

– Images, links, dynamic content

– Information load

• Navigation – Where am I?

– Where have I been?

– Where can I go?

• Functionality– Clearly labeled

– Accommodates novices + experts13

• Identity (website only; analogous for software)

– Digestable in 5 seconds

– Clear purpose

– Contact

– Credentials

https://uxplanet.org/


In Practice …

• Lean UX Design – focus on solving the problem– UX Case Study: Process of Information Architecture by Soojin Sielle Kim

• Budget constraints

– Usability design not often highly prioritized

• Summary:

– Keep the design simple

– Make sure the functionality works

– Check all the data is recorded as expected

– Must do (at least minimal) usability testing on new users

14

https://medium.com/@siellekim/ux-case-study-process-of-information-architecture-706eb7861f6b

https://medium.com/@siellekim


Effects of UX and Web 3.0

“Web 3.0 is all about personalization and the Semantic Web while integrating real-time data through different platforms.”Hassan Bawab, CEO Magic Logix

15

Semantic technology will create a meaningful format around human interaction online and human interests.

This format will enable better online matchmaking and content distribution in addition to better control of online privacy through smarter distribution.

Watch “A Day Made of Glass” and take a look at Corning’s vision for the future with specialty glass at the heart of it.Consider how Corning is leveraging Lean UX and the Web 3.0 as part of its future product offerings.

https://www.linkedin.com/in/hassanbawab

https://www.linkedin.com/pulse/20140324055730-14091619-effects-of-web-3-0-in-the-new-digital-world

https://www.youtube.com/watch?v=6Cf7IL_eZ38

http://www.youtube.com/watch?v=6Cf7IL_eZ38


Examples of UX Web Design

16

https://fantasy.co/work


V-Commerce

17

• Fall 2018, Shopify™ officially launched a new technology that they coined as "video commerce". The technology is called Inviid, it's an eCommerce application that allows online shoppers to buy products they see in videos, right on the screen, without ever leaving the viewing experience.

• It's a groundbreaking technology that was developed by Bold Commerce™.

https://www.youtube.com/watch?v=rVrvn2l7skk


© 2014 Pearson Education, Inc. Publishing as Prentice Hall 18

Table 4.11, Page 222

E-Commerce Site Design


Presentation Checklist

• The most important elements of the site are clearly visible

• What you sell is easy to determine

• Information is easy to find

• Presentation of information does not seem overwhelming

• Major headings are clear and descriptive

• Styles and colors are simple and consistent

• Company and site owner are easy to identify

• Methods for technical support is easy to determine

• Site layout looks good on different browsers

• URLs are meaningful and user-friendly

• HTML page titles are descriptive

19


Navigation Checklist

• Navigation is clear and consistent throughout the site

• The back button always goes back to the previous page

• References (text labels) are consistent

• Number of buttons and links is reasonable

• Unnecessary links and scrolling are minimized

• Links are consistent and easy to identify

• Site search is easy to access and use

• Site search results are easy to interpret

• Company logo is linked to homepage

20


Functionality Checklist

• Pages load quickly on typical Internet setup

• Each page can be bookmarked individually

• Site functionality works the same on different browsers

• Alternate text tags are provided for images and dynamic content

• Dynamic content is used sparingly

• Site displays informative error pages

• Transactions are logged accurately

• Data is stored securely

21



Table 4.10, Page 221

Unpopular E-Commerce Web Site Features


Developing a Mobile Web Site and Building Mobile Applications

• Three types of m-commerce software

– Mobile Web site

• Responsive Web design

– Mobile Web app

– Native app

• Planning and building mobile presence

– Use systems analysis/design to identify unique and specific business objectives

23



• Table 4.13, Page 231

Developing a Mobile Web Site


Developing a Mobile Web Presence

• Design considerations– Platform constraints: Smartphone/tablet

– Mobile UX Design: Key Principles by Nick Babich

• Performance and cost– Mobile Web site:

• Least expensive

– Mobile app: • Can utilize browser API (Application Program Interface)

– Native app: • Most expensive; requires more programming

25

https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6

http://babich.biz/


Developing a Mobile Web Presence

• What are the key differences between user experience on a Web site and on a mobile device?

• Why would a mobile Web site or app from the same merchant need different content or functionality?

• In which cases would a merchant want to develop a mobile app over a mobile Web site?

26


Importance of Early User Feedback

• Iterative prototyping– Minimize resources spent in the “wrong” direction

• Check conformance with users– Design of the overall system

– Standards and consistency with existing systems

– Expectations of how users use your system

• Requirements modification– Change requests to clients when necessary

• Compare alternative designs

• Measure system performance

• Predict usability of final system before deployment

27


Evaluating Usability

• User studies (controlled labs/“clinics” vs. field data)

• Gather feedback explicitly or implicitly

• Common metrics:– Task completion rates

– Frequency of “interested” functionality used

– Frequency of “Help” used

– Error rate

• Task is done incorrectly

• Task is done sub-optimally

– Subjective satisfaction ratings

• Odd-point scale: most commonly known the Likert scale

• Even-point scale: forces users to choose

– Open-ended subjective feedback (opinion mining)

28


Evaluating Usability

29

Questions Opinion Mining Might Ask

• Is this product review positive or negative?

• Is this customer email satisfied or dissatisfied?

• Based on a sample of tweets, how are people responding to this ad campaign/product release/news item?


Common Types of Evaluation Methods

• Passive observations and monitoring real use (mostly qualitative)– Field studies (use logs)

– Controlled lab setting (use videos, logs, notes)

• Collecting user’s opinions (mostly qualitative)– Focus groups

– Structured interviews

– Surveys (ranking, scales, open-ended)

– Feedback forms

• Experiments and benchmarking (very quantitative)– Pilot studies (preliminary assessment)

– Controlled lab studies (compares small samples)

30


Team Exercises

Round 3 Team Exercise (3)

31

Documents

ACS 3907 E-Commerce · –UX Case Study: Process of Information Architecture by Soojin Sielle Kim • Budget constraints –Usability design not often highly prioritized • Summary: