---
tags: COMP-1850
---
<style>
.markdown-body h1:first-of-type {
margin-top: 24px;
}
.markdown-body h1 {
margin-top: 64px;
}
.markdown-body h1 + h2 {
margin-top: 32px;
}
.markdown-body h2 {
margin-top: 48px;
}
.markdown-body h3 {
color: cornflowerblue;
}
.exercise {
font-size: 150%;
font-weight: bold;
color: rgb(227,112,183);
}
.note {
color: red;
}
</style>

# COMP 1850 Lesson Six

## User Experience (UX) and User Interface (UI) Design

UX Design is the process of creating experiences that are relevant, meaningful, and useful for users. It aims to address specific questions or problems when designing an experience or product, like:

- How does a user know how to use the product (image below for reference)? Are conventions used?
- How does a user accomplish their goals?
- How does a user feel when interacting with a product? Is it trustworthy? Innovative? Frustrating?

UI Design is the part of UX that refers to how the site looks, i.e. the visual design of elements (buttons, colours, fonts) on the page.

## Information Architecture (IA)

How to organize and present page content in a manner that is intuitive and easy to use

### Organization - how is content organized?

Is content hierarchical (many different pages under a single heading) or flat (few pages under many headings)

### Labelling - how is information communicated efficiently to users?

What terms are used to communicate actions or navigation?

Main page, Home, Home page
Search, Find, Browse
Help, Frequently Asked Questions, FAQ
News, What's New
About, About Us, Who We Are

### Navigation - how do users move towards a goal

Show users where they are (e.g. active link styles) and how the pieces are related (breadcrumbs)

Ground users by making navigation persistent, consistently styled, and consistently organized (ordering should never change from page to page)

Ordering of the navigation options will suggest priority – place important options at the beginning, less important options at the end

Follow established conventions when placing common page elements (eg: search, language, login options should be placed in the top-right corner)

Wherever possible uses conventional labels ('About Us', 'Contact Us', etc)

Help to facilitate the 3-click rule. Try not to force the user to do extra 'work', e.g. additional clicks/taps or requiring them to manage inner scrollbars

### Search systems - how can users search for information

What types of information can be searched?

How much information can be searched?

## User Stories

User Stories are a method for discovering functional requirements of a site.

From the point of view of a user of the site, fill in the blanks of the following template:

As a _______ i want to ________ so that i can __________
<br><br>

---

<span class="exercise" id="a2">In-Class Exercise</span>

Imagine you are building a website for a client – a medium-sized theatre company – that offers shows, food (during performances), and camps for kids during the summer months.

Below is a list of pages the client has provided, presented as links that could be placed into navigation for the website.

By yourself, or in groups, organize the links into 3-5 logical groups and create a menu heading for each group:

On Stage
Ticket Info
Audition Info
Shows Through The Years
Getting Here
Visitor Questions
Accessibility
Dining Options
Volunteering
Musical Theatre Camp
Our Story
Donate
Board and Staff
Alumni
Contact Us

## Optional Reading Before Next Class

- [Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [Web Fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts)

## Tasks To Complete Before Next Class

- [ ] (Optionally) complete the [readings](#Optional-Reading-Before-Next-Class)