Vous êtes sur la page 1sur 28

Management Information System

Lecture - 8
BAMM - 03
by
Jamil Ahmad
PROJECT PREPARATION
• SAVE your presentation file with the following name
convention:
– BAMM-03-W#-G#-Selected Topic
MIDWEEK EXAMS
2nd Week of March 2020
Not in any group????
BAMM-F18-009 Amir Kaleem
BAMM-F18-388 Umair Abid
BAMM-S19-007 Talha Yasin
BAMM-S19-026 Asad Ali
BAMM-S19-037 Zulfiqar Ali
BAMM-S19-071 Mohsin Ayaz
BAMM-S19-083 Muhammad Nabeel Amin
BAMM-S19-092 Adnan Malik
BAMM-S19-009 Abdullah Amin
BAMM-S19-058 Muhammad Farhan
BAMM-S19-100 Raja Muhammad Abubakar Kayani
DATABASE AND SOFTWARE
Graphical User Interface (GUI)
• GUI design, also known as user interface design, refers to the
aesthetic design of all visual elements of a digital product’s
user interface; namely the product’s presentation and
interactivity.

• UI design is the design of the product’s interface—in other


words, what the user actually sees when they interact with the
product.
DATABASE AND SOFTWARE
Graphical User Interface (GUI)
• From color schemes to typography, UI designers are
responsible for the product’s look and feel.

• UI design involves anticipating the user’s preferences and


creating an interface that both understands and fulfills them.
DATABASE AND SOFTWARE
User Interface Design Basics?
• User Interface (UI) Design focuses on anticipating what users
might need to do and ensuring that the interface has elements
that are easy to access, understand, and use to facilitate
those actions.

• UI brings together concepts from interaction design, visual


design, and information architecture.
DATABASE AND SOFTWARE
Choosing Interface Elements?
• Users have become familiar with interface elements acting in
a certain way, so try to be consistent and predictable in your
choices and their layout.

• Doing so will help with task completion, efficiency, and


satisfaction.
DATABASE AND SOFTWARE
Interface elements include but are not limited to:
– Input Controls:
• buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes,
toggles, date field
– Navigational
• Components: breadcrumb, slider, search field, pagination, slider, tags, icons
– Informational Components:
• tooltips, icons, progress bar, notifications, message boxes, modal windows
– Containers
• accordion
DATABASE AND SOFTWARE
• There are times when multiple elements might be appropriate
for displaying content.

• When this happens, it’s important to consider the trade-offs.

For example:
• sometimes elements that can help save you space, put more
of a burden on the user mentally by forcing them to guess
what is within the dropdown or what the element might be.
INPUT CONTROLS
Element Description Examples
Checkboxes Checkboxes allow the user to select
one or more options from a set.

It is usually best to present


checkboxes in a vertical list.

More than one column is acceptable


as well if the list is long enough that it
might require scrolling or if
comparison of terms might be
necessary
INPUT CONTROLS
Element Description Examples

Radio Radio buttons are used to allow


buttons users to select one item at a time.

Dropdown Dropdown lists allow users to select


lists one item at a time, similarly to radio
buttons, but are more compact
allowing you to save space.

Consider adding text to the field,


such as ‘Select one’ to help the user
recognize the necessary action.
INPUT CONTROLS
Element Description Examples
List boxes List boxes, like checkboxes, allow
users to select a multiple items at a
time,but are more compact and can
support a longer list of options if
needed.

Buttons A button indicates an action upon


touch and is typically labeled using
text, an icon, or both.
INPUT CONTROLS
Element Description Examples
Dropdown The dropdown button consists of a
Button button that when clicked displays a
drop-down list of mutually exclusive
items.

Toggles A toggle button allows the user to


change a setting between two states.

They are most effective when the


on/off states are visually distinct.
INPUT CONTROLS
Element Description Examples
Text fields Text fields allow users to enter text.
It can allow either a single line or
multiple lines of text.

Date and A date picker allows users to select a


time pickers date and/or time.

By using the picker, the information


is consistently formatted and input
into the system.
Navigational Components
Element Description Examples

Search Field A search box allows users to enter a


keyword or phrase (query) and
submit it to search the index with the
intention of getting back the most
relevant results.

Typically search fields are single-line


text boxes and are often
accompanied by a search button.
Navigational Components
Element Description Examples

Icons An icon is a simplified image serving


as an intuitive symbol that is used to
help users to navigate the system.

Typically, icons are hyperlinked.


Information Components
Element Description Examples

Notifications A notification is an update message


that announces something new for
the user to see.

Notifications are typically used to


indicate items such as, the
successful completion of a task, or
an error or warning message.
Information Components
Element Description Examples

Tool Tips A tooltip allows a user to see hints


when they hover over an item
indicating the name or purpose of
the item.

Message A message box is a small window


Boxes that provides information to users
and requires them to take an action
before they can move forward.
CONTAINERS
Element Description Examples

Accordion An accordion is a vertically stacked


list of items that utilizes show/ hide
functionality.

When a label is clicked, it expands


the section showing the content
within.

There can have one or more items


showing at a time and may have
default states that reveal one or
more sections without the user
clickingTool Tips
DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• Everything stems from knowing your users, including
understanding their goals, skills, preferences, and tendencies.

• Once you know about your user, make sure to consider the
following when designing your interface:

• Keep the interface simple.


DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• The best interfaces are almost invisible to the user.

• They avoid unnecessary elements and are clear in the


language they use on labels and in messaging.

• Create consistency and use common UI elements.


DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• By using common elements in your UI, users feel more
comfortable and are able to get things done more quickly.

• It is also important to create patterns in language, layout and


design throughout the site to help facilitate efficiency.

• Once a user learns how to do something, they should be able


to transfer that skill to other parts of the site.
DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• Be purposeful in page layout.

• Consider the spatial relationships between items on the page


and structure the page based on importance.

• Careful placement of items can help draw attention to the


most important pieces of information and can aid scanning
and readability.
DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• Strategically use color and texture.

• You can direct attention toward or redirect attention away from


items using color, light, contrast, and texture to your
advantage.

• Use typography to create hierarchy and clarity.


DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• Carefully consider how you use typeface.

• Different sizes, fonts, and arrangement of the text to help


increase scanability, legibility and readability.

• Make sure that the system communicates what’s happening.


DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• Always inform your users of location, actions, changes in
state, or errors.

• The use of various UI elements to communicate status and, if


necessary, next steps can reduce frustration for your user.

• Think about the defaults.


DATABASE AND SOFTWARE
Best Practices for Designing an Interface
• By carefully thinking about and anticipating the goals people
bring to your site, you can create defaults that reduce the
burden on the user.

• This becomes particularly important when it comes to form


design where you might have an opportunity to have some
fields pre-chosen or filled out.