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.
Interface Conventions: Application
Loading...
来自 California Institute of the Arts 的课程
Visual Elements of User Interface Design
567 个评分
从本节课中
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!
与讲师见面
Michael WorthingtonFaculty, Program in Graphic Design
School of Art
In this section, we're going to look at Interface conventions,
and we're going to break it down into two different categories.
The first category is going to be the interface and how it relates to us
as users, as physical human beings.
There are certain conventions here,
to do with the arrangement and positioning of information on the screen.
If we take our basic keypad again,
and think about how that works,
this is set of numbers,
keys to push, a screen where we see the results.
But if we just take those elements without thinking about the design of the elements,
and reconfigure them, the keypad becomes very dysfunctional.
We're not really sure how to use it anymore,
and we're not really sure we recognize it as a keypad anymore.
There's a couple of reasons for this.
One is, because we're used to seeing keypads arranged in a certain way.
We're used to seeing a calculator for example,
and we're used to seeing that look in a certain format,
and that format came from a physical calculator,
that came out of the 1970s and the 1980s.
Although, if we look at a digital calculator, on say
the iPhone for instance,
the design of it is actually exactly the same.
It's not the graphic elements that are changing,
the buttons are still the same.
Some of the shapes might change,
the colors might change but it's really
the arrangement that is causing disorientation for the user,
because it changes how we physically interact with the keypad,
and this is a very important thing for us to look at,
in terms of thinking about interface conventions -
physical interface conventions that is.
It is to do with the size of the screen that we have in relationship with the human form.
And our basic human interactions and human economics have had
a strong impact on what kinds of things
can actually happen in the interface on the screen,
because we've rearranged the elements we've made it quite dysfunctional.
If we put it back to how it was,
we can look and see what happens when we, as human beings, press the key.
Straight away we need to be able to think about
the key in relationship to the size of our fingers,
as well as the keypad in relationship to the size of our hand.
So the size and shape of the buttons,
might actually have some relationship to the human body,
to the human hand.
If we think about how we interact with this keypad to press numbers,
the human hand gets in the way of a lot of the numbers when we're pressing them,
particularly the numbers at the top,
then we can't see the ones at the bottom that hidden by the hand.
So straight away we realize,
that we have to have the screen showing the result of our interaction, above the keypad.
Otherwise, the hand is going to be hiding
the screen and we won't be able to see what we're pressing.
So there's a very simple relationship between our physicality as human beings,
and the machinery, the screens that we interact with.
You could think about the keypad,
the scale of it in relationship to the scale of the human hand.
If a calculator for instance,
fits in a hand in a comfortable way,
then it's going to make our interactions much more easy.
It's going to feel comfortable to interact with.
This becomes relevant when we think about how the scale of
the calculator for instance in relationship to the human body,
also relates to the scale of your phone currently for instance.
Both devices, are held in the hand at a comfortable distance,
and we're able to interact with the screen or the interface with
our fingers to get the information we want in the easiest way possible.
When we interact with a hand-held device,
we're really just using our fingers.
We're not really using any other parts of our body to interact with it.
But when we have different sized screens,
we start to interact with them in different ways.
When we hold these screens at different distances from our body,
so they fill our visual field in different ways as well.
We hold and look at a phone very differently from how we
hold and look at and interact with an iPad for instance.
If we look at another screen,
if we increase the size of that screen even more,
then we can see how our interaction changes even more.
So for instance with a laptop,
our hands are much more active in a different way.
We're not touching the screen anymore.
Now we're touching a keypad.
So we've got a different kind of physical movement.
We're also not holding the computer anymore,
in the way that we hold an iPad or a phone for instance.
Now it's resting, and we've got two hands to interact with the keyboard now.
And these different kinds of interactions with physical devices,
explains a little bit,
why we like to have different sized screens for
different kinds of functions in different kinds of interactions.
Some are more portable than others,
but the ones that are not portable allow us to have
a much larger screen and perhaps allow us to do much more robust kinds of work,
in a fixed situation.
The physical size of the computer,
has a relationship to our bodies.
If we think about a desktop computer,
it's more removed than even the laptop is because now the keypad is a separate item,
our screen is even bigger,
and it's definitely much less mobile.
The phone you can take everywhere,
but a desktop computer stays in one place.
These physical conventions, all have a relationship to
the human body and how we interact with different sizes of screens,
and how we have different tasks that we complete on those different screens.
Those screens, are based on our relationship to our whole human body,
and being able to carry screens around.
But our interaction with the screens,
takes place mainly through the hand and through the eye.
And these are both conduits to our thinking device,
a CPU in other words, our brain.
The eye lets us see what we've done and the hand lets us interact with the computer.
It's important to know about
these physical conventions because these lead into the digital conventions.
Over the years, Interface designers have taken into account to user's physicality,
to develop the best solutions of how interfaces should work.
And these digital conventions have become
standardized to the point of interface invisibility.
We never really think anymore why our navigation menus are at the top of our screen,
we just take it for granted that that's where they're going to live.
It's become such a convention that has become invisible to us.
So our navigation choices normally go at the top of the computer.
If you want to see a long menu when we click on these,
and this have space for the menu to fall down.
So being the top seems a logical place for it to be.
It's also a convenient place to put something,
where you can ignore it if you want to.
We're very used to a certain arrangement and hierarchy of information in the Interface.
Our branding or identity might be very visible,
sitting under the menu choices at the top of the screen,
and then we probably have an area taking up
most of the rest of the screen that shows variable content,
or whatever specialized things that particular website can do.
And then down at the bottom,
quite often the secondary information,
or the things you need to find when there's a problem with the website.
Menu items that are at a lower hierarchical level than the ones at the top.
So even just by putting these four things together,
we have something that looks like a fairly generic and familiar website.
We could shrink our menu down to make it have
a better relationship to the size of the screen,
and we could introduce another convention.
How do we search the information on our website?
How do we find something?
So if we have a live text entry box with the search icon,
even the icon itself is a convention.
We know what the icon of the magnifying glass means,
we know it's not actually for a magnifying glass,
we know it's for looking or searching for something.
So it's another digital convention.
