USER INTERFACE DESIGN

BSCT 222
Email:
[email protected]
Tel: 0755141983(watsup)
 Introduction
• A user interface is a point of human-computer
interaction on an app, webpage or device.
• This can include keyboards, display screens,
and the appearance of a desktop.
• It is also the way through which a user
interacts with an application, system or
website.
 Why do we need interfaces?
• User interfaces enable users to effectively control the computer
or device they are interacting with.
• It is through interfaces that users are able to make requests to
server and server is able to respond and provide feedback
through interfaces.
• For users to manipulate systems such as, mobile money, mobile
banking, ERMS , they need to have interfaces where the controls
are placed.
• To ease use on systems such as databases you need interfaces
such as forms.
• To debug and troubleshoot systems you need to have interfaces.
• Administration of interfaces requires and administrative interface.
 Objectives of this Course
• This course will be a project based course, where
focus will be on a complete project to be able to
discuss the entire techniques , methods interface
design.
• Principles of design , analysis of interfaces, and
tools to be used will be in a continuous way basing
on the project each student will be working on.
• So this is a continuous project , where emphasis will
be on building on what we already accomplished.
 Is it ethically good to have a very nice user
interface without a back-end?
• An interface cannot exit on its own without a
back-end.
• Without a back-end you do not have a
working system. Meaning you need to attach a
back-end to your interfaces in-order for users
to experience what you are offering on your
interfaces.
•
 Types of Interfaces
• Graphical user interfaces
• Command life interfaces.
• Menu-driven user interfaces.
• Touch user interfaces.
• Voice user interfaces.(VUI)
• Form based user interfaces.
• Natural language user interfaces.
 User interface Design(UI and UX)
• The UI is often talked about in conjunction with
user experience(UX), which may include the
aesthetic appearance of the device, response
time and the content that is presented to the
user within the context of the user within the
context of the user interface. Both terms fall
under the concept of human computer
interaction, which is the field of study focusing
on the creation of computer technology and all
forms of IT design.
 User interface elements usually fall in one
of these four categories;
• Input Controls; That allow users to input information
into the system. E.g an entry field that enables users to
register with email address.
• Navigational components; that help users to move
around a product or website, such as menu on android.
• Informational components; including notifications,
progress bars, message boxes that share information
with users.
• Containers; that hold related content together, such as
accordions-vertically stacked list of items with show/hide
functionality.
 What is the difference between UX and UI
design?
UX Design UI Design
• Is the process of enhancing • Is responsible for the
user satisfaction by product’s look and feel.
improving the usability and • UI design flesh-out the
accessibility of the product. product with visual and
• UX design draws out the interactive touch-points.
map of the product.
 History of UI
• In early computers, there was very little user interface except for a few
buttons at an operator’s console. Many of these early computers used
punched cards, prepared using keypunch machines, as the primary
method of input for computer programs and data. While punched cards
have been essentially obsolete in computing since 2012, some voting
machines still use a punched card system.
• The user interface evolved with the introduction of the command line
interface, which first appeared as nearly blank display screen with a line
for user input. Users relied on keyboard and a set of commands to
navigate exchanges of information with the computer. This command line
led to one in which menus (lists of choices written in text) predominated.
• Finally , the GUI arrived, originating mainly in Xerox’s Palo Alto Research
Center (PARC), adopted and enhanced by Apple and effectively
standardized by Microsoft in its Windows operating systems.
 Graphical UIs
• Elements of a GUI include such things as
windows, pull-down menus, buttons, scroll
bars and icons.
• With the increasing use of multimedia as part
of the GUI, sound, voice, motion video and
virtual reality are increasingly becoming the
GUI for many applications.
 Mobile UIs
• The emerging popularity of mobile
applications has also affected UI, leading to
something called mobile UI.
• Mobile UI is specifically concerned with
creating usable, interactive interfaces on
smart phones and tablets and improving
special features, like touch controls.
 History of User interface design
• In the late 20th century, computing technology featuring touch screen
keyboards was seen as revolutionary.
• Businesses soon realized that an appealing digital interface was paramount
in crafting a memorable and enjoyable user experience.
• It was until 2007, however that the concept of UI design blossomed. This
was the year Apple disrupted the tech industry with the first Iphone,
featuring a user interface explicitly crafted for handheld devices that
featured sophisticated touchscreen functionality. This technology changed
the UI design forever.
• As the 2010s, approached, a UI renaissance that led to an era of powerfully
disruptive and decidely more human forms of interaction boomed.
• With the rise of zero UI, voice assistants gained popularity in 2011 with
Apple’s siri voice assistant. Since then we have also had the introduction of
google Now(2012) and Amazon’s Alexa devices(2014).
 Conclusion
• Today, most businesses recognize that
exceptional UI design is vital for fostering
brand loyalty and building brand recognition.
• Customers no-longer enjoy well designed
products, they. Expect them.