COURSE REPORT STRUCTURED PROGRAMMING (IT4492E) TOPIC DESIGN AN SALES WEBSITE USING DESIGN PATTERN TECHNIQUES

Section 1: AuthenticationWeb applications enable one-to-one interaction and store user-specific information, so they require users to create an account REGISTRATION and choose unique cre

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY SCHOOL OF INFORMATION AND COMMUNICATION

****************

COURSE REPORT STRUCTURED PROGRAMMING

(IT4492E)

PATTERN TECHNIQUES

Name: Ho Van Nam

Student ID: 20194762

Class: 126997

Mentor: Trinh Thanh Trung

Hanoi, January 12, 2022

Table of Contents

Introduction 2

Section 1: Authentication 3

I Registration 4

II Log in 6

III Log out 7

IV Forgot Username/Password 8

Session 3: Buying 9

I Creating Product 9

II Searching, Sorting and Filtering 10

1 Searching 10

2 Sorting 12

3 Filtering 13

III INBOX 13

Session 4: Payment 15

Conclusion 18

References 19

In recent years, eCommerce has grown significantly and contributes to the development of the world in general and of Vietnam in particular They are commonly referred to as web applications, or hosted applications — applications based on a software as a service (SaaS) model or cloud computing These web applications are different from more traditional web sites in that their emphasis is on allowing users to accomplish tasks such as send email, make travel reservations, find homes, pay bills, transfer money, buy products, send invitations, and so forth

Despite these benefits and increasing use, designing interfaces for web applications remains difficult Challenges in creating usable interactions are mainly related to the underlying “ loosely coupled ” web architecture, a limited set of interactive controls natively supported in web browsers, and the lack of design guidance as to how user interactions should be implemented

Using design patterns addresses many of these concerns and can complement design guidelines and style guides to create better, and consistent, interface designs and improve usability of web applications Thus, patterns explicitly focus on the problem within the context of use and guide designers on when, how, and why the solution can

be applied Patterns are practical and describe instances of “good” design while embodying highlevel principles and strategies Patterns have recently become attractive to user interface and software designers as well for their following benefits:

- Proven design solutions and guidance for their use

- Improved design process

- Reusability and consistent interfaces

- A common, shared language

- Effective teaching aid and reference tool

- Usable web applications

Although Design Patterns offer these important benefits, also keep in mind that they are not a specific solution to every single problem Ultimately, developers need to address challenges one by one and adapt their solutions to the particular programming languages they use

In the scope of this essay, I will demonstrate how to design a reusable sales website and the benefits of applying them compares to traditional web sites

Section 1: Authentication

Web applications enable one-to-one interaction and store user-specific information, so they require users to create an account (REGISTRATION) and choose unique credentials to access the web applications Registering may require users to enter a set

of alphanumeric characters from a distorted image to prevent spam and ensure that registering users are human and not auto- mated computer programs (CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart) When registering is established, users can identify themselves by LOG IN and store their personal information to database In addition, users can log in via several popular platform such as Facebook, Google, etc without create a new account After logging

in and accomplishing desired tasks, users often need a way to exit the application to ensure that unauthorized users cannot access and modify their account information by LOG OUT Many applications also have provisions for automatically logging out users after a certain period of inactivity (AUTOMATIC LOGOUT)

Because many web applications are used occasionally, users often forget their login information and need a way to retrieve it by create FORGOT USERNAME/PASSWORD feature Depending on the security level of the applications, users may be asked to provide one or more pieces of unique information about their account Besides, providing the email address or phone number associated with the account is required because it’s the easiest way to get the account back, a code will be sent to user’s email address or phone number and the only thing they can

do is enter them into a textbox in web interface

In order to reuse the code, the information fields should be separated into separate components (FORM, BUTTON) for easy customization in different cases Each component has its own props to determine what will happen in the future For

example, LOG IN and REGISTER page are quiet similar so we can reuse most of interface and logic code base of LOG IN page to REGISTER page

I Registration

Web applications often need to uniquely identify users The reasons include preventing unauthorized access to personal and sensitive information (e.g., financial

or health records), increasing convenience (e.g., storing billing and shipping addresses), and enabling sharing (e.g., photos)

Despite such benefits, users often hesitate when providing personal information and often shy away from applications that require them to set up an account Therefore, some websites allow customers to purchase without log in and provide their address to

a form In fact, Topix.net found a significant increase in the number of posts and a substantial improvement in their quality when they removed the registration requirement from their discussion forums Although it's convenient in some cases, but

if customers use this site often, they should have an account to save their information for future payments When registration unavoidable, clearly indicate the benefits of registration and ask users only for the information necessary to set up an account

Example of REGISTER form

For most applications, setting up an account or registering is not one of the users’ goals Their goals typically include purchasing an item, sharing information, paying bills, and so forth Asking users to register is usually an interruption in their interaction experience, since it distracts them from their primary goals Therefore, registration should be delayed as long as possible This is common in modern e-commerce applications (e.g., Tiki, Lazada.vn) allow users to explore content without a user account Only when users want to make a purchase, add content, or make comments these web applications require users to register Thus, delaying registration also allows users to experience the application’s benefits and better understand the need and value of setting up an account

Rules for creating REGISTRATION:

a) Using an email address for a username

Email addresses are always unique and are easier to remember even when users have multiple email accounts Besides, it is easier to send the reminder information to their registered email address

b) Use CAPTCHA to ensure registration by humans

An increasing number of automated web crawlers have made it difficult to distinguish them from legitimate human users Use CAPTCHA as part of the registration form to minimize registration by such automated agents

CAPTCHA requires users to type characters from a distorted image containing letters and/or numbers before they can register The ability to correctly identify characters from the distorted image is used as sufficient evidence that the user

is human and not an automated agent (see the CAPTCHA pattern next)

c) “Lazy” registration approach

To make the registration process as efficient as possible, even when it is delayed, an option is to use a “lazy” registration approach, which is collecting information about users using browser cookies as they interact with the application By collecting information in the background, when users are presented with the registration form, some of the registration fields can be prepopulated, requiring users to verify collected information rather than enter

it For example, if a user signs up for an email newsletter, the application has the user’s email address, which it can prepopulate on the registration form d) Verify registration

This is commonly accomplished by sending a message with a confirmation link

to the email address or OTP code to the phone number provided by users during registration Only after users have returned to the application by clicking the confirmation link (by pasting the registration URL in their browser address field) or enter OTP code, do they consider their registration complete To ensure email reaches users’ email inboxes, ask them to check their spam folders

e) Allay user’s privacy concerns

Users may be hesitant to register because they may not know how their personal information will be used Include a brief privacy statement (e.g.,

“Your information will not be sold or shared”) followed by a link to a detailed privacy policy statement to address such concerns

f) Setup security question

In common, if user log in via email or phone number, it’s not necessary However, to prevent the case that customer lose their email address or SIM, good programmers should add a security question to help them get back their account

Users need to identify themselves so that they can access their account information For example, users may want to access their account to see the order status on an e-commerce application (e.g., Amazon, Alibaba)

Example of LOG IN form

It’s easy to create a log in page after created registration page, just copy a part of registration page and change some value of props In addition, to make it easy to access the application, consider offering users an option to let the application remember their login information

Rules for creating LOG IN:

a) Offer user multiple options to login

- Via Google, Facebook, Guest,…

b) Enable users to retrieve forgotten login information

c) Consider a two-step login for higher security

Many financial applications require two-step login to verify a user’s identity: +) Step 1: asking users to provide their username or user ID and password +) Step 2: requires users to answer a security question

d) Remember login information

+) Remember both username and password

+) Remember only username

III Log out

Reasons:

- To prevent unauthorized users from accessing their personal information

- To log out of one account and log in to another

- To indicate that they have completed their task and no longer need access

to the application

The ability to log out is particularly important for web applications because they are not installed on a specific computer and are accessible from anywhere as long as users have access to the Internet and a web browser On one hand, this offers users the flexibility to access their information from anywhere (e.g., libraries, shared computers

at work, Internet cafes, and so forth), but on the other hand, this ease of access opens opportunities for misuse and fraud Therefore, users must be offered an explicit way to end their session

Rules for creating LOG OUT:

a) Use labels consistently

Although this has minor usability implications, a relevant design issue is labeling the action that ends user sessions with the application The common options are logout, log out, sign out, logoff, log off, and sign off As the link represents an action, appropriate usage is log out, sign out, log off, or sign off

In the absence of any research evidence, a common practice is to complement the action users used when accessing the web application: For most consumer applications, Sign Out (to complement Sign In) is used, and for many business and technical applications, Log Out (to complement Log In) is used

b) Automatic logout

For applications (i.e., www.ctt.hust.edu.vn) with security and/or privacy concerns, automatically log out users after a certain period of inactivity (i.e., session timeout) Typical session timeouts are 15- to 45-minute durations depending on the sensitivity of the data that may be exposed As the session timeout is approaching, offer users a warning and give them an opportunity to stay logged in Confirmation is especially useful in instances where user tasks are likely to take some time (e.g., in cases of multistep tasks like checkout) and likely data loss could be frustrating to users

When automatically logging out users, consider saving their information It could be annoying for users to have their session time out and discard all their data when they intended to finish what they started but were distracted for some reason For example, Gmail saves users’ incomplete emails in the “draft” state and marks them to indicate that they have a pending response

IV Forgot Username/Password

Users often forget usernames and/or passwords, especially when they are accessing an application that they rarely use Therefore, it’s important that users have a way to remember that information or retrieve it Because users typically realize that they have forgotten their credentials when asked to log in, the options to retrieve them should be provided near the login area In situations where user accounts are not tied to private

or sensitive information, sending a link to reset passwords via email is acceptable However, when dealing with sensitive information, it’s important to take additional steps to verify identity before allowing users to reset or access their log in credentials

CONFIRM USER IDENTITY WITH SECURITY QUESTIONS:

- If the web application stores sensitive information, additional layers of security may

be necessary to verify the identity of the user claiming to have lost log in information Additional identification questions may include information that only the account owner knows, such as the last four digits of his or her Social Security number, account number, and so forth The identification may also require users to answer one or more security questions set up during registration

SEND AN OTP CODE TO USER’S PHONE NUMBER OR EMAIL

ADDRESS:

- The sever will automatically send an OTP code to user’s phone number or email address that customer registered Then, user entry OTP code into a box and they can get back their account and set a new password.

Session 2: Buying

An important decision for designers is what users should see or which page they should be taken to after they log in to the application

For web applications that allow access without logging in, users either remain on the same page or are taken to the next page in the sequence For example, if users decide

to log in on a product details page, they remain on the same page However, if they log in during the checkout process, they are taken to the next page in the sequence the shipping information page

Application main pages are typically personalized based on user profiles, interests, and information needs with the intention of presenting the most relevant content and filtering out the not-so-relevant information However, PERSONALIZATION driven

by business rules or some form of social filtering may not be able to accurately predict the information users may need Thus, applications often offer users CUSTOMIZATION options to allow them to tailor the application to their preferences and compensate for personalization shortcomings Customization is not limited to information and task-related needs; it often extends to a choice of colors, logos, themes, fonts, and page layouts

I Creating Product

To display product efficiently, we can use recursive composition, which entails building increasingly complex elements out of simpler ones s Recursive composition gives us a way to compose a document out of simple graphical elements As a first step, we can tile a set of characters and graphics from left to right to form a line in the document Then multiple lines can be arranged to form a column, multiple columns can form a page, and so on

Composite Label