SDA ASSSIGNMENT NO 6

SUBMITTED BY: Mohsin Aslam

SECTION: BCSE 6B
REGISTRATION NO: F171BCSE186
Make a report on the following interface patterns available for
1. Complete user interface
2. Page layout
3. Forms and input
4. Tables
5. Direct data manipulation
6. Navigation
7. Searching
8. Page Elements
9. E-Commerce

Ans:

1. Complete User Interface:

The user interface (UI) is the point of human-computer interaction and communication in
a device. This can include display screens, keyboards, a mouse and the appearance of
a desktop. It is also the way through which a user interacts with an application or
a website. The growing dependence of many businesses on web applications and mobile
applications has led many companies to place increased priority on UI in an effort to
improve the user's overall experience.

Types of user interfaces:

The various types of user interfaces include:

 Graphical user interface (GUI)

 Command line interface (CLI)

 Menu-driven user interface

 Touch user interface

 Voice user interface (VUI)

 Form-based user interface

 Natural language user interface

Examples of user interfaces:

Some examples of user interfaces include:

 Computer mouse

 Remote control

 Virtual reality

 ATMs

 Speedometer

 The old iPod click wheel

2. Page Layout:
Page layout refers to the arrangement of text, images, and other objects on a page. The
term was initially used in desktop publishing (DTP), but is now commonly used to
describe the layout of webpages as well. Page layout techniques are used to customize the
appearance of magazines, newspapers, books, websites, and other types of publications.

The page layout of a printed or electronic document encompasses all elements of the
page. This includes the page margins, text blocks, images, object padding, and any grids
or templates used to define positions of objects on the page. Page layout applications,
such as Adobe InDesign and QuarkXpress, allow page designers to modify all of these
elements for a printed publication. Web development programs, such as Adobe
Dreamweaver and Microsoft Expression Studio allow Web developers to create similar
page layouts designed specifically for the Web.
 3. Forms and Inputs:

The INPUT element defines a form control for the user to enter input.

While INPUT is most useful within a FORM, HTML 4 allows INPUT in
any block-level or inline element other than BUTTON. However, old
browsers such as Netscape 4.x will not display any INPUT elements outside
of a FORM.

When a form is submitted, the current value of each INPUT element within

the FORM is sent to the server as name/value pairs.
The INPUT element's NAME attribute provides the name used. The value
sent depends on the type of form control and on the user's input.

The type of form control defined by INPUT is given by

the TYPE attribute. The default TYPE is text, which provides a single-line
text input field. The VALUE attribute specifies the initial value for the text
field. The SIZE and MAXLENGTH attributes suggest the number of
characters and maximum number of characters, respectively, of the text field.

While the MAXLENGTH attribute can be an effective guide to the user,

authors should not depend on the enforcement of a maximum number of
characters by the client. A user could copy the HTML document, remove
the MAXLENGTH attribute, and submit the form. Thus authors of form
handlers should ensure that any necessary input length checks are repeated on
the server side.

The password input type is a variation on the text type. The only difference

is that the input characters are masked, typically by a series of asterisks, to
protect sensitive information from onlookers. Note, however, that the actual
value is transmitted to the server as clear text, so password inputs do not
provide sufficient security for credit card numbers or other highly sensitive
information.

The following example uses text and password fields with

the LABEL element to bind text labels to the INPUT elements:

<P><LABEL ACCESSKEY=U>User name: <INPUT TYPE=text

NAME=username SIZE=8 MAXLENGTH=8></LABEL></P>
<P><LABEL ACCESSKEY=P>Password: <INPUT TYPE=password
NAME=pw SIZE=12 MAXLENGTH=12></LABEL></P>

The radio and checkbox input types provide switches that can be turned on

and off by the user. The two types differ in that radio buttons are grouped (by
specifying the same NAME attribute on each INPUT) so that only one radio
button in a group can be selected at any time. Checkboxes can be checked
without changing the state of other checkboxes with the same NAME.
The VALUE attribute, required for radio buttons and checkboxes, gives the
value of the control when it is checked. The boolean CHECKED attribute
specifies that the control is initially checked.

4. Tables:

A table is a named relational database data set that is organized by rows and columns.
The relational table is a fundamental relational database concept because tables are the
primary form of data storage.
Columns form the table’s structure, and rows form the content. Tables allow restrictions
for columns (i.e., allowed column data type) but not rows. Every database table must
have a unique name. Most relational databases have naming restrictions For example, the
name may not contain spaces or be a reserved keyword such as TABLE or SYSTEM.

Relational tables store data in columns and rows. When creating a table, columns must be
defined, but columns may be added or deleted after table creation. During this time,
column data restrictions may or may not be defined. For example, when creating a
CUSTOMER_MASTER table for storing customer information, definitions may be
added, e.g., a DATE_OF_BIRTH column accepting dates only or a
CUSTOMER_NAME column that may not be null (blank).
Table rows are the table’s actual data elements. In the CUSTOMER_MASTER table, the
rows hold each customer record. Thus, a row consists of a data element within each table
column. If a row value is not entered, the value is termed “null,” which does not have the
same meaning as a zero or space.
Tables also have other table relationships that are defined by special columns, and the
most prominent are primary and foreign keys. For example, the CUSTOMER_MASTER
table has a CUSTOMER_ID column that is used to uniquely identify each table
customer. If another table needs to refer to a certain customer, a corresponding column
(also known as a foreign key) that references the CUSTOMER_MASTER table’s
customer id may be inserted. Other tables do not need to store additional customer details
that are already stored in the CUSTOMER_MASTER table.
 5. Direct Data Manipulation:
In computer science, direct manipulation is a human–computer interaction style which
involves continuous representation of objects of interest and rapid, reversible, and
incremental actions and feedback.[1] As opposed to other interaction styles, for example,
the command language, the intention of direct manipulation is to allow a user to
manipulate objects presented to them, using actions that correspond at least loosely to
manipulation of physical objects. An example of direct manipulation is resizing
a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.
Having real-world metaphors for objects and actions can make it easier for a user to learn
and use an interface (some might say that the interface is more natural or intuitive), and
rapid, incremental feedback allows a user to make fewer errors and complete tasks in less
time, because they can see the results of an action before completing the action, thus
evaluating the output and compensating for mistakes.

6. Navigation:

Navigation design is the discipline of creating, analyzing and implementing ways for
users to navigate through a website or app.

Navigation plays an integral role in how users interact with and use your products. It is
how your user can get from point A to point B and even point C in the least frustrating
way possible.

To make these delightful interactions, designers employ a combination of design patterns

including links, labels and other UI elements. These patterns provide relevant information
and make interacting with products easier.

Good navigation design can:

 Enhance a user’s understanding

 Give them confidence using your product

 Provide credibility to a product

The best kind of navigation design is one which promotes usability. Poor navigation will
result in fewer users for your product and this is why navigation design is central to user
experience design.
Navigation design is complex and there are many design patterns to choose from when
optimizing the user experience. A design pattern is a general, reusable solution to a
problem.

No one pattern is necessarily better than the other. Each pattern that you use in your
product will have to be carefully considered and tested before implementation.

This ensures that the navigation pattern you have chosen is right for your product but
more importantly that it is right for your users.

Ideally, you want to approach navigation from a user-centered design perspective.

7. Searching:
A search box is a combination of input field and submit button. One may think that the
search box doesn’t need a design; after all, it’s just two simple elements. But since the
search box is one of the most frequently used design element on content-heavy websites,
its usability is critical.
When dealing with a user interface with clear sections or levels, allowing users to refine
their searches according to these specific regions can help to reduce the number of
irrelevant items or options they must consider, saving them much time in the process. As
you can see from the example below, the user is able to select one of three different
search refinement categories: “This Mac,” “IDF Course – UI Design Patterns,” and
“Shared.”
Searching for a file on your computer may take a long time, due to the large number of
documents you will have collected over the years. Refining your search to a folder in
which the file is most likely located, however, saves a lot of time. In this case, the search
is refined to the folder “IDF Course – UI Design Patterns.”
 8. Page Elements:

User interface (UI) elements are the parts we use to build apps or websites. They add
interactivity to a user interface, providing touch points for the user as they navigate their
way around; think buttons, scrollbars, menu items and checkboxes.

As a user interface (UI) designer, you’ll use UI elements to create a visual language and
ensure consistency across your product—making it user-friendly and easy to navigate
without too much thought on the user’s part.

In this guide, we’ll explore some of the most common user interface elements,
considering when and why you might use them.

User interface elements usually fall into one of the following four categories:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input controls allow users to input information into the system. If you need your users to
tell you what country they are in, for example, you’ll use an input control to let them do
so.

Navigational components help users move around a product or website. Common

navigational components include tab bars on an iOS device and a hamburger menu on an
Android.

Informational components share information with users.

Containers hold related content together.

 9. E-Commerce:

E-commerce (electronic commerce) is the activity of electronically buying or selling

of products on online services or over the Internet. Electronic commerce draws on
technologies such as mobile commerce, electronic funds transfer, supply chain
management, Internet marketing, online transaction processing, electronic data
interchange (EDI), inventory management systems, and automated data
collection systems. E-commerce is in turn driven by the technological advances of
the semiconductor industry, and is the largest sector of the electronics industry.
Modern electronic commerce typically uses the World Wide Web for at least one part of
the transaction's life cycle although it may also use other technologies such as e-mail.
Typical e-commerce transactions include the purchase of online books (such as Amazon)
and music purchases (music download in the form of digital distribution such as iTunes
Store), and to a less extent, customized/personalized online liquor
store inventory services.[1] There are three areas of e-commerce: online
retailing, electronic markets, and online auctions. E-commerce is supported by electronic
business.[2]
E-commerce businesses may also employ some or all of the followings:

 Online shopping for retail sales direct to consumers via Web sites and mobile

apps, and conversational commerce via live chat, chatbots, and voice assistants[3]
 Providing or participating in online marketplaces, which process third-
party business-to-consumer (B2C) or consumer-to-consumer (C2C) sales
 Business-to-business (B2B) buying and selling;
 Gathering and using demographic data through web contacts and social media
 Business-to-business (B2B) electronic data interchange
 Marketing to prospective and established customers by e-mail or fax (for example,
with newsletters)
 Engaging in pretail for launching new products and services
 Online financial exchanges for currency exchanges or trading purposes