Explore
For Enterprise
Join for Free
Log In

Arts and Humanities
Business
Computer Science
Data Science
Information Technology
Health
Math and Logic
Personal Development
Physical Science and Engineering
Social Sciences
Language Learning
Degrees
Certificates

Explore all of Coursera

Browse
Search
For Enterprise
Log In
Join for Free

A Brief Historical Overview of Interface Design

Loading...

Visual Elements of User Interface Design

California Institute of the Arts

4.8 (767 ratings) | 21K Students Enrolled

Course 1 of 4 in the UI / UX Design Specialization

This design-centric course examines the broad question of what an interface is and what role a designer plays in creating a user interface. Learning how to design and articulate meaning using color, type, and imagery is essential to making interfaces function clearly and seamlessly. Through a series of lectures and visual exercises, you will focus on the many individual elements and components that make up the skillset of an interface designer. By the end of this course, you will be able to describe the key formal elements of clear, consistent, and intuitive UI design, and apply your learned skills to the design of a static screen-based interface. This is the first course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.

Reviews

4.8 (767 ratings)

5 stars
621 ratings
4 stars
127 ratings
3 stars
16 ratings
1 star
3 ratings

PS

Mar 15, 2019

Very useful course, Highly recommended for beginners who is going to kick start with UI/UX design. Very detailed content and explanation. Thanks for the such a wonderful course.

SG

Jun 24, 2019

This course will take you through the details of building a user friendly interface. I loved completing the assignments each week that finished a big project at the end.

From the lesson

What IS a user interface anyway?

In this first week we will look at some basic broad concepts and contexts for user interfaces, looking at examples both on and off-screen. We will look at basic principles of interaction theory, discuss the relationship between UI and UX, and examine the relationship between coding and designing. We will discuss the roles of functionality and aesthetics in interface design and outline a "form-first" philosophy to user interface design. This week will focus on background information and terminology and will give you the context and vocabulary necessary before you start making great interfaces!

A Brief Historical Overview of Interface Design4:13

Interface Conventions: Theory6:23

Interface Conventions: Application7:33

Taught By

Michael Worthington
Faculty, Program in Graphic Design

Transcript

In previous segments, we've looked at the relationship between the user and content,

and we've seen how the interface connect as a bridge between those two.

We've looked at some historical models of what that interface can be,

and now we're going to look at a few more,

but these models are all going to be screen based,

starting in the 1970s,

with the advent of the calculator.

We can see from this list how various different screen based activities have

permeated our society and basically become more and more popular,

and more ever present in our lives.

And these screens have become multifunctional as they've advanced.

The pocket calculator had very limited functionality, for example,

and video games, or arcade games existed in

one physical space you had to go and visit to play one game.

An ATM machine had a very specific function, for instance,

to get cash, and it existed in a physical site of the bank.

And you can see, as we advance through these different screens,

through the web, CD-ROMs,

into phones, and apps,

AR and even VR,

we're looking at how these screens can do many, many more things.

They've gone from having a single use to having a multiple use.

In a lot of ways, those early screen based experiences were rooted in the real world.

They were very fixed.

You had to physically have the calculator in your hand,

and had very limited functionality with buttons that you pressed,

and the interface itself was not even a digital one,

it was a physical button.

These fixed experiences exist in the real world and they were very limited.

Whereas, nowadays we're looking much more at what you might call a transfixed experience.

We're looking at multiple things that you can do in the digital world.

You can carry a phone, or a laptop,

or an iPad from wherever you want to go in the world,

you carry them around with you,

but what all of these early models have in common,

is that they're all based around a screen.

They're all connecting a user to an experience or an outcome through the screen.

So if we take something simple like the ATM for example,

it clearly connects a customer with getting money from the ATM machine.

And we could look at something like this as a very simple way to look at

interaction and look at the stages that might happen at an ATM.

And these could be four very simple stages.

You have a card, you need to enter a pin,

you get a certain amount of money,

and then you get the card and the money back.

And we could map that out is quite a simple interaction,

but once we try to think about it in graphic design terms,

in terms of what the actual user interface might be,

it becomes a little more tricky than you might think,

even for such a simple interaction.

To begin with, we'd need to have a series of numbers so that we can enter a PIN,

and also so we can enter an amount of money we might want to obtain.

So, you could think about the keypad itself,

its physical arrangement, and how that might have a connection to the human hand.

And if we put these numbers in,

we can think about,

these could be buttons that you could press, but,

wait a minute, if you press them, nothing really happens.

How do you know if you've actually done anything by pressing the button?

So, straight away we can understand that when we interact with an interface,

we need to have some kind of feedback,

some kind of result.

Otherwise, how do we know if the interface is working?

How can we trust that interface?

So, even in this very simple model,

there has to be some feedback.

So, if we press a key for example,

we want to see on a separate screen that those numbers appear,

so that we know that our interaction has actually worked,

but what happens if we do something wrong?

What happens if we press the wrong number?

Well, we're going to need an extra key I think.

We're going to need a "Cancel" key for example,

in case we make a mistake.

And we might also need an "Okay" key for when we press the right number.

So, even from this very simple idea of looking at how a keypad works,

we figured out some very important principles for interactivity.

The fact that we need to have feedback as a user,

the fact that if we make a mistake we need to be able to correct it,

and the fact that we need to say that things are okay when we've done them right.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play

Coursera
About
Leadership
Careers
Catalog
Certificates
MasterTrack™ Certificates
Degrees
For Enterprise
For Government

Community
Learners
Partners
Developers
Beta Testers
Translators

Connect
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Tech Blog

More
Terms
Privacy
Help
Accessibility
Press
Contact
Directory
Affiliates