This ppt is about the introduction of user interface

1. UNIT I
• Introduction to User Interface Design (UI)
• Brief History of UI Design.
• Human Computer Interface,
• Characteristics of Graphics Interface,
• Direct Manipulation Graphical System,
• Web User Interface: Popularity, Characteristic & Principles.

2. User Interface
• User interface (UI) design is the process designers use to build
interfaces in software or computerized devices, focusing on looks or
style.
• Designers aim to create interfaces which users find easy to use and
pleasurable. UI design refers to graphical user interfaces and other
forms
• e.g., voice-controlled interfaces.

3. Designing User Interfaces for Users
• User interfaces are the access points where users interact with designs.
They come in three formats:
• Graphical user interfaces (GUIs)—Users interact with visual
representations on digital control panels. A computer’s desktop is a
GUI.
• Voice-controlled interfaces (VUIs)—Users interact with these
through their voices. Most smart assistants—e.g., Siri on iPhone and
Alexa onAmazon devices—are VUIs.
• Gesture-based interfaces—Users engage with 3D design spaces
through bodily motions: e.g., in virtual reality (VR) games.

4. Designing User Interfaces for Users
• To design UIs best, you should consider:
• Users judge designs quickly and care about usability and
likeability.
• They don’t care about your design, but about getting their tasks done easily
and with minimum effort.
• Your design should therefore be “invisible”: Users shouldn’t focus on it but on
completing tasks: e.g., ordering pizza on Domino’s Zero Click app.
• So, understand your users’contexts and task flows (which you can find from,
e.g., customer journey maps), to fine-tune the best, most intuitive UIs that
deliver seamless experiences.

5. Designing User Interfaces for Users
•UIs should also be enjoyable (or at least satisfying and frustration-free).
•When your design predicts users’needs, they can enjoy more personalized and
immersive experiences.
• Delight them, and they’ll keep returning.
•Where appropriate, elements of gamification can make your design more fun.
•UIs should communicate brand values and reinforce users’trust.
•Good design is emotional design.
•Users associate good feelings with brands that speak to them at all levels and
keep the magic of pleasurable, seamless experiences alive.

6. UI vs. User Experience (UX) Design
• Often confused with UX design, UI design is more concerned with the
surface and overall feel of a design. UI design is a craft where you
the designer build an essential part of the user experience. UX design
covers the entire spectrum of the user experience. One analogy is to
picture UX design as a car with UI design as the driving console.
• “Interfaces get in the way. I don’t want to focus my energies on an
interface. I want to focus on the job.”
— Don Norman, Grand old man of UX design

7. How to make Great UIs
meanings just by scanning.
• To deliver impressive GUIs, remember—users are humans, with needs such as
comfort and a limit on their mental capacities. You should follow these
guidelines:
• Make buttons and other common elements perform predictably (including
responses such as pinch-to-zoom) so users can unconsciously use them
everywhere. Form should follow function.
• Maintain high discoverability. Clearly label icons and include well-indicated
affordances: e.g., shadows for buttons.
• Keep interfaces simple (with only elements that help serve users’purposes)
and create an “invisible” feel.
• Respect the user’s eye and attention regarding layout. Focus on hierarchy and
readability:
• Use proper alignment. Typically choose edge (over center) alignment.
• Draw attention to key features using:
• Color, brightness and contrast. Avoid including colors or buttons excessively.
• Text via font sizes, bold type/weightifn.gP
r
,a
in
ta
ay
lD
ic.
sS
,a
r
ca
af
,pC
S
itE
a,lG
sH
aR
nC
E
d,N
da
i
g
s
p
t
a
u
nrM
c
e
o
b
b.e
N
t
o
w
. een letters. Users should pick up

8. How to make Great UIs
•Minimize the number of actions for performing tasks
but focus on one chief function per page.
Guide users by indicating preferred actions.
Ease complex tasks by using progressive disclosure.
•Put controls near objects that users want to control.
For example, a button to submit a form should be near the form.
•Keep users informed regarding system responses/actions with feedback.
•Use appropriate UI design patterns to help guide users and reduce burdens
(e.g., pre-fill forms). Beware of using dark patterns, which include hard-to-see
prefilled opt-in/opt-out checkboxes and sneaking items into users’carts.
•Maintain brand consistency.
•Always provide next steps which users can deduce naturally, whatever their context.

9. AShort History of Computer User Interface Design
• Whether it’s a laptop or a smartphone, every piece of hardware has a user interface
(UI) design that tries to contribute to a great user experience. As we know, a good
UI is about allowing for the smooth completion of any task and making the
experience enjoyable. However the UI you see on your Apple iPhone or Windows
PC has been a long time in the making. This article will take a brief look at how
computer interface design has evolved over the past 40 years or so.

10. economic sense by removing the need
959
f5
o
02
r27i
9n
5 k and printing materials.
Batch Computing & Command Line Interfaces
The IBM 029 Card Punch
• It all started with Batch computing when computing power didn’t exceed that of
modern microwaves. The user interface of Batch computers consisted of the input
of a punched card or equivalent media and apart from this operating console,
humans had no interaction with these early batch computers in real time.
• Complicated user interfaces were considered an unnecessary expense because the
software was designed to utilize the processor to the maximum. This started to
change when Command-Line Interfaces (CLIs) were introduced.
• CLI’s greatly reduced the latency to seconds instead of days or hours because the
user interface was a series of request-response transactions that, importantly,
allowed the user to change their mind about transactions in response to real time
data from earlier transactions.
• The next key user interface progression was the introduction of video display
terminals. Having your command inputs appear on a screen and be able to
reversely modify them was much faster than having them printed. It also made

11. Batch Computing & Command Line Interfaces

12. Graphical User Interface (GUI)

13. Graphical User Interface (GUI)

14. Graphical User Interface (GUI)
• “Afunny thing happens when you design a computer everyone can use.”
• That was the headline of a 1984 print campaign for Apple’s newest device,
• the Macintosh. At the time the company was kicking off a revolution
in
• personal computing with its graphical user interface (GUI) and mouse—two
• innovations that helped democratize computing by making
computers understandable and approachable for the average
consumer.
• During the ’90s and early 2000s, however, continued innovation stalled. But
• as the 2010s approached, a UI renaissance began that has led to
many powerfully disruptive—and, frankly, more human—forms of
interaction.
• So where are we headed as the planet continues to digitize? To figure that
• out, we must start with a look at how we have interacted with computing to
• date and how those innovations have created the foundation for the newest
forms of interaction.

15. Graphical User Interface (GUI)
Windows 1.0
• It became clear that having a digital user interface and pointing
systems equivalent to a mouse could allow for a compelling user
experience. The first GUI was developed by researchers at Xerox Palo
Research Center (parc) in the 1970’s and was the start of a succession
of computer graphic innovations to GUI’s which has led us to where
we are today.
• The first system that could arguably be described as the first fully
integrated desktop computer was the Xerox Star released in 1981. This
led to others in the computer-science community to try and replicate
similar advancements that lead to the release of machines such as the
Apple Lisa Office System 1 (1983), VisiCorp Visi On (1984), and Mac
OS System 1 (1984).
• The Mac OS System 1 operating system had a windows based system
with icons that had many features that are still used on today’s
systems. Windows could be moved around the screen with the cursor,
and files could be moved to different folders by dragging and dropping
on the target window or icon.

16. Graphical User Interface (GUI)
• The next 10 years of GUI releases started to incorporate features such as
• color, higher resolution displays and better processing power but the GUI
• design remained relatively consistent. Notable GUI releases include Amiga
• Workbench 1.0 (1985), Windows 1.0, 2.0, and 3.0 (1985 -1990) and Mac
• OS System 7 (1991)
• Windows 95 was a significant upgrade on earlier Windows GUI’s
• (Windows 1.0 didn’t even support basic features like overlapping windows for
example).
• It was the first Windows GUI to incorporate a small close button and a
• resize thumb on each window. Other graphics were included but probably
• the most notable was the inclusion of the ‘START’ button which is still
present in Windows 10 released nearly 20 years later.
• Mac OS X was first released in 2001 and continues to be the basis for Mac
• OS operating systems which, perhaps unlike Windows, has seen its GUI
foundations kept relatively consistent.

17. Rise of the Smartphone

18. Rise of the Smartphone
• Towards the end of the 2000’s computer UI design started to change significantly
due to the rise in popularity of the smartphone. This huge shift in computing
hardware led to designers having to rethink interfaces from scratch.
• Of course there were portable devices before the Apple iPhone, including laptops
(obviously) and handhelds such as Amstad’s Pen Pad, US Robotics’ PalmPilot and
arguably the first smartphone: the IBM Simon in 1993, which was the first to
include telephone and PDA features in one device.
• However, it was Apple in 2007 who perhaps came up with, until that point, the
best dedicated UI for handheld devices: a sophisticated touch screen GUI with
multi-touch functionality and significantly, feature functionality distributed as
apps.
• Applications had been around since the late 1980’s on devices such as Psion Epoc
with apps like a diary. However the crucial step Apple took in 2007 was to allow
3rd party developers to create Web 2.0 applications that looked and behaved just
like apps built into the Phone; these could seamlessly access the iPhones services,
including making a phone callandsendemail

19. Rise of the Smartphone
• In July 2008Apple opened theApp Store and 3 months later Google’s
Android market (later renamed Google Play Store) was launched. This was
the beginning of the “App Revolution” with the Windows Phone Store and
Amazon app store launching in 2010 and 2011 respectively.
• Today’s handheld UI’s are designed around app functionality, but this trend
can be seen to influence desktop and laptop UI’s as well. Windows 8 was a
notable example of this. It heavily incorporated functionality similar to that
of a modern smartphone or tablet but it seems that there was, and still is, a
preference for the more traditional desktop UI. This was reflected in
Windows 10, which kept some of the touch/app functionality but has
combined it with the more familiar Start menu desktop design from
previous releases.

20. What next?

21. What next?
• Gesture technology is on the way
• Computer UI’s have come a long way since textual command inputs, and
indeed from the traditional computer desktop operating systems. Along with
keyboards and mouse cursors, touch and voice inputs are common in both
desktop and mobile devices now. Such functionality is likely to become
more prevalent in the future along with other UI advancements such as
gesture functionality, brain computer interfaces and augmented reality.
• So there we go, an extremely brief history of computer user interfaces.
What have we missed out? Probably a lot, so let us know what you think
were the defining Computer UI’s over the past half century. What was your
favorite UI release?