Visual Elements of UI Design

What is UI? 

Nowadays, everyone receives pretty much everything through a screen, and 

that screen can act as a mediating device. And what that means is, the screen can change
the experience. If you think about something like a news event for instance, that news
event could be perceived in different ways depending on how the story is told, upon how
the story is mediated. So if the basic story is that self-driving cars have been approved, on
the one hand you might think that that's good news, but depending on how it's
reported, how it's mediated, you might think that that's bad news. Marshall McLuhan
famously said that the medium is the message.

The key components are the user and the interface. The user is the viewer or the person
interacting with the content and the interface is the way that the user gets to that
content. How they access that content. So in a lot of ways, you could think about the
interface as being a bridge between the user and the content. But that bridge is not totally
passive. That bridge can shape the way the user experiences the content.

But with interface design, I think it's more of a case of the medium affects the
message. The medium can shape the message. And that medium is the interface. So the
interface shapes the experience. So if everything everyone experiences is through the
screen, through the interface, then the interface designer has a lot of power. Because the
interface designer is shaping every experience that everyone has. And this gets at the heart
of what we're going to look at next: the interface shapes the experience. And the interface
is the UI part, the user interface design. And the experience is the UX part, the user
experience design. And you put those two together and you've pretty much got
control over how everybody experiences every kind of content.

The relationship between UI and UX

In this segment, we're going to look at the relationship between UI and UX. We often
conflate these two terms. But to begin with, we're going to pull them apart in order to
examine them separately, so we can understand the differences between the two. UI is
often a term that's used to talk about the interface itself. It's about how it looks. It's about
visual design, and how we access digital content. UX is a little bit more about how that
digital content feels, what the experience of it is. And that is often rooted much more in a
non-visual design practice. It's important to understand these two practices as being
different, because they often appeal to different kinds of people who do different kinds of
jobs. Visual design is much more rooted in graphic design, for example, a non-visual
design might involve much more research, 
and planning, and testing. So the UI designer is really looking at the interface itself, and
the UX designer is often focusing much more on the experience of the user. If we break
these roles down further, we can see how they might suit different kinds of people doing
different kinds of work. A user interface designer might be focusing more on form and
aesthetics, on the look and feel and the organization of the information, whereas a UX
designer might concentrate much more also on how the interface feels, but on the
navigation and the structure and the story of the whole site or app. In a lot of ways the UI
designer is looking at the surface of visual identity, and that's often design driven. So it
suits someone that often has more graphic design or visual skills, whereas the UX
designer is looking at content, how to get the user engaged with that content, and this
work is often driven by the user's experience and by feedback from the user. So UX can
be seen as being much more user driven, and UI being much more design driven. But of
course these two things overlap. We talk about a UI/UX designer as somebody who does
both of these things, but in truth a UI designer it tends to focus more on UI with a little bit
of UX, an UX designer tends to focus more on UX with a little bit of UI. A simple way to
think about this is that UI is design driven, and UX is user driven. And while there are
some people that can work with both of these things equally well and occupy the space in
the middle, and be a UI/UX designer, this is a little bit less common. As we mentioned,
UI deals with visual design and that's very tangible and physical. You're often making an
actual interface using digital tools like Photoshop and Illustrator, whereas the UX
designer is quite often making something more propositional. They're trying to create an
experience that often doesn't really exist. So they have to map, and plan, and figure out
what that experience is without it being tangible. So when we look at this diagram, we can
see the UI and UX are really separate professions, but we've put them together into one
profession. 
And you could think about this diagram as being useful to think about where do you fit
into this diagram. Do you work as a UI or a UX designer? Are you primarily focusing on
the interface and design skills? Or are you more interested in how you get feedback from
a user and how you might use that to shape the experience of a website or an app, for
instance? If you think about where you sit within this diagram, you can think about
whether your focus is to be a visual designer, or whether it's more to do with a subject like
social science. And if you can figure out what your strengths are, you can figure out
where you fit within this diagram, and what kind of designer you want to be. Whether
you're going to be more design driven, or more audience driven. For the sake of this
beginning class, we're going to look much more at a design driven approach to UI. And
what this means is, we're not really going to focus so much on research and on
feedback, we're going to take our form first approach to design. What that does is it puts
the designer in the driving seat. It means that the designer makes all of those initial
decisions about what the interface looks like, about how the interface works, before
they've even got feedback from the user. And one of the reasons we're doing this is
because the user sees the form first. When you go to an app or a website, you actually
experience the form before you even get to the content. You're visually seeing what the
thing is before you're actually interacting and experiencing it. If we put ourselves in the
position of the designer rather than the user, our initial experience of an interface is
somewhat different. The designer actually experiences the content before the
form. Because when a designer is given material to work with to turn into a website or an
app, it doesn't actually have any form to begin with. The designer is the person that
develops content specific form by looking at that content, and figuring out what is the best
form, what is the best structure, what is the best interface for that particular content, and
for that particular idea that I want to communicate to a user.

Roles in UI/UX

 
A simple division would be to look at it in terms of a front end and a back end of the
process. 
The front end is much more visible to the user and involves interface design. It's the thing
that the user is going to see on the screen, whereas the back end is much more
invisible, and it's hidden from the user. And that involves the programming, the coding,
the functionality of the site. Outside of these two main areas are another two that are very
important. Ideation deals with coming up with an idea, figuring out how your website is
going to work, what its goals are, and testing deals with getting feedback from an
audience at an early stage, which might shape both the programming, and the interface
design as well as the ideation. These four areas together provide the core for developing
UI/UX. Front end design could easily be equated to UI design, where you're really dealing
with graphic elements, and looking at the interface itself, building design assets. The back
end could be looked at as coding, or programming, which obviously involves a totally
different skill set. Testing might be the area more where your UX is involved, where
you're planning, mapping things out, and getting feedback from a user. But the truth is,
that this compartmentalization of these four different areas isn't a realistic representation
of how they really work. In truth, they have a great deal more exchange between each
other, even especially at the early stages of development. Especially at the early stages of
thinking about what a web site or what an app might be, these four key areas bounce
ideas around between each other as things get developed and defined. So there's a process
of testing that goes on between coding something, coming up with ideas, building the
visual interface itself, and trying it out with the user. These four areas can be key in
developing a digital experience, 
but then once it's developed, it's going to need to be further tested with an exterior
audience in a finished state. But it's also going to need some kind of marketing and
promotion. So these are other areas that are connected to the process of building
UI/UX. And while they sit outside these core areas, they're also very important. Another
two areas that sit outside the core, are the areas of production and content
development. And these normally happen in the middle stages of the process of
developing a website or an app. For instance, where you need to get assets, and you need
to maybe produce hundreds of different screens, or hundreds of different pieces of
artwork. 
And even when all of these things, all of these jobs are put together, and you've actually
made an app or a website that's out in the world and functioning, there's also a certain
amount of upkeep and updates that might involve all of these different people every time
something has to change on a site or an app. So we talked about these areas not really
being compartmentalized, but interacting with each other and informing each other. You
could also think about where do you want to fit, what kind of role do you want to have
in the UI/UX process in developing web or developing apps for example. 
You could decide that as a UX designer, you're really interested in mapping, and planning,
and figuring out the interaction of a piece of content of a website for instance. But you
might also really enjoy working with an audience and testing it, getting feedback and
implementing that feedback. 
Or you could decide that you're much more interested in coming up with ideas for a
website or an app. And those ideas might all be based around coding for example. They
might be driven by technical skills. So you can see how these two areas don't have to
operate separately. You don't have to be pigeonholed into just one of these. You can
actually work in two or three of them at the same time. And what that does is, it starts to
play to whatever your strongest skill set is. So you might decide that you like doing UI
design, based much more in coding, which would be slightly different than just
working with coming up with ideas that are based in coding. You'd have to have graphic
design skills, and programming skills. Some people manage to do all of these things, and
that's quite rare these days. Especially as websites and apps have accelerated to the point
of needing immediate, a lot of upkeep, and updates having to have immediate response to
problems. When the web first started for instance, one person could do all of these
roles. In the mid 1990s for instance, 
I might be designing a website, where I would be writing the content, taking the
photographs, designing the interface, doing all of the programming, and all of the
testing, as well as perhaps even hosting the site on my own server. Nowadays, that's a
little more rare mostly because of the scale of a lot of commercial enterprises to do with
web and apps where you might be working. 
They have a much larger audience, and everything has to happen much faster. So it's very
difficult for just one person to do that. 

Interface Conventions: Review

There are plenty of “best practice” lists for good user interfaces; mine is not definitive but
a good starting point for a beginner.

Real world knowledge is based on analog models. For example, we understand the
functionality of digital buttons on a screen because we’ve experienced analog buttons in
the real world—on calculators, remote controls, elevators, and so on.

Learned behavior If real world knowledge is based on analog models, then perhaps you
can say learned behavior is based on digital models. For instance, swiping left or right is a
digital convention that is now fairly common among plenty of apps, but has no corollary
in the real world. It is an action users have picked up from using smartphones and the
apps on them.

Cause and effect is about action and reaction. When a user presses a button and
something happens, they quickly understand the functionality of the button. For example,
pressing “Send” to send an email message, or “Submit” to submit a form.

Consistency is about applying a systematic logic to the way interfaces look and function
so they remain familiar to a user. For example, on a telephone keypad, where all of the
numbered buttons look the same, you can anticipate that pressing the number “8” will
have more or less the same function as pressing the number “1”.
Seamlessness is about ensuring that the action and reaction are closely linked. The
interaction should be easy (with as few steps as possible), and results should be
immediate.

Immediate intuition We’ve been conditioned that in order to interact with an interface we
need to touch it in some way. While the system may not be immediately obvious, the
solution is usually quickly discovered.

Fulfillment is the payoff for the user! An interface should function as it was intended, but
there are other ways to reaffirm it as a positive experience. Anyone who uses Mailchimp
to send email to a list of customers is likely familiar with the “Freddie High Five” that
appears after you send a campaign.

Undo/redo gives the user peace of mind that their actions are reversible. A good UI will
allow a user to change their mind after they’ve made an action, or at least notify the user
before they take a crucial step. You can see a few examples of this in Google’s webmail
service, Gmail, from notifying you if you’ve possibly forgotten to attach a document to an
outgoing email, to giving you a short window of time to “undo” a sent message before it
leaves your outbox.

To review a few other perspectives on UI principles and best practices, I recommend the
following:

The 4 Golden Rules of UI Design, by Nick Babich, Adobe Blog, February 7 2018.

10 Usability Heuristics for User Interface Design, by Jakob Nielsen, Nielsen Norman Group
website, January 1 1995.

Principle of Consistency and Standards in User Interface Design, by Euphemia Wong, Interaction
Design Foundation, July 2018.