UX I: Survey

Week 8: Wireframing & Internet of Things

The Internet of Things

Internet speed

1991 = 1.2 kbits/s

1998 = 30.8 kbits/s

2018 = 102267.0 kbits/s

The Internet of Things

The Internet of Things (IoT) will generate $14,400,000,000 of value over the next decade

There will be 40 times more devices than people on the internet in 2020

Smart HomeThe smart home is likely the most popular IoT application at the moment because it is the one that is most affordable and readily available to consumers. From the Amazon Echo to the Nest Thermostat, there are hundreds of products on the market that users

can control with their voices to make their lives more connected than ever.

WearablesWatches are no longer just for telling time. The Apple Watch and other smartwatches

on the market have turned our wrists into smartphone holsters by enabling text messaging, phone calls, and more. And devices such as Fitbit have helped

revolutionize the fitness world by giving people more data about their workouts.

Smart CitiesThe IoT has the potential to transform entire cities by solving real problems citizens

face each day. With the proper connections and data, the Internet of Things can solve traffic congestion issues and reduce noise, crime, and pollution.

Connected CarThese vehicles are equipped with Internet access and can share that access with

others, just like connecting to a wireless network in a home or office. More vehicles are starting to come equipped with this functionality, so prepare to see more apps

included in future cars.

HealthcareThe internet of things has numerous applications in healthcare, from remote

monitoring to smart sensors and medical device integration. It has the potential to not only keep patients safe and healthy, but to improve how physicians deliver care as

well. Healthcare IoT can also boost patient engagement and satisfaction by allowing patients to spend more time interacting with their doctors.

How does IoT work?

RFID Sensor Smart Tech

Nano Tech

Radio-frequency identification - To identify and track the data of things.

To collect and process the data to detect the changes in the physical status of things.

To enhance the power of the network by devolving processing capabilities to different parts of the network.

To make things smaller and allow smaller things to have the ability to connect and interact.

Exercise

Get into groups of 3

Randomly select an everyday item from the bucket

Conceptualize an IoT implementation

Outline any tech that would need to be developed/thought through - an app, sensors, a hub, etc.

Technical feasibility not required :) But you should understand it as well as a user would need to

Wireframing

Starting “design”

What is a wireframe?

● Wireframes are the starting point to the actual nitty-gritty design process

● Creates the structure or backbone of your entire layout

● A low-fidelity, simplified outline of your product or website

What’s the point?

● Allows you to cement and iterate your IA before you dive into the details● The simplicity is forgiving of mistakes and allows you to experiment when

designing the structure without investing the time and resources needed for polished mockups

Wireframes compared to other design deliverables

Wireframes = the skeleton. Loosely shape the final product, giving a reliable idea of where everything will probably go.

Content = The muscle (and as meaty or as trim as you want or need)

Mockup = The skin. They are strictly visual, where visual decisions are solidified, often pixel-perfect

Prototype = Life. Testing your interface, bringing movement into it.

If prototypes are life...

Wireframes should be the means to creating a prototype. The days of lone wireframes as documentation are gone. But we’ll get to that later...

Who uses wireframes?

UX/IA - To communicate user flows. Usually a combination of flow charts, storyboarding and wireframes achieve this.

Visual/UI designers - Can inspire and begin the UI design process. Allows them to focus on the visuals more thoroughly and focus less on layout

Developers - Allows them to understand functionality

Stakeholders/product managers - Allows them to ensure that requirements and objectives are met

When does wireframing happen?

Wireframing happens at the BEGINNING of the actual design process*

First, you sketch. You should sketch multiple options and narrow down… sometimes take elements from each (Frankestein again)

Ideal process:

Sketch > Wireframe > Lo-fi prototype > Hi-fi mockup > Hi-fi prototype > Code

A more lean process:

Wireframe > Lo-fi prototype > Hi-fi mockup > Code

* We’ve been following a design process this whole time. When I say ACTUAL design process, I mean the activity of figuring out what goes where on the interface

OK what do all these different fidelities mean?

Low-fidelity wireframe

OK what do all these different fidelities mean?

High-fidelity wireframe

Why aren’t we just doing high-fidelity mockups?

● Nicely put: they are a waste of time at this stage.● High fidelity designs take a lot of time and wireframes are meant for iterating quickly● We’re not meant to be thinking about color/pictures; it’s about hierarchy and placement

at this point

The exception!

If you’re using a UI library that has been tested and established and are only reusing elements that already exist, ok, fine, go straight to a high-fidelity mockup, I GUESS.

*****I would still do wireframes to make sure your stakeholders are giving feedback about hierarchy and placement - sometimes if it looks “done” people won’t focus

What to focus on

The wireframe is going to be the bridge between your information architecture and your visual design. They should communicate the following:

Structure: How will the pieces of this site be put together?

Content: What will be displayed on the site?

Informational hierarchy: How is this information organized and displayed?

Functionality: How will this interface work?

Behavior: How does it interact with the user? How does it behave?

But how do I… design?

● Don’t feel like you have to reinvent the wheel - use reference material.● Study and familiarize yourself with common design patterns.● Use a lot of websites and apps regularly - make it your beeswax to see what

trends are out there● https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-

patterns

Wireframing Prep

Step 1: Content Inventory

Account for all the content you will need on an individual page.

Examples:

Step 2: Define your hierarchy

Put your content in order from top to bottom or side to side, based on relevance to the user and business goals - also, what tells a good, logical story?

Step 2: Define your hierarchy

Put your content in order from top to bottom or side to side, based on relevance to the user and business goals - also, what tells a good, logical story?

ActivityGet into groups of 3. Spend some time creating a hierarchy using the prompt provided & post-its

Hint: you need to pull out the individual pieces of content from the prompt

Prompt:

You are designing a portfolio page for a musician/composer. On this page, she wants a biography as well as clips of some of her work (both audio and videos), links to social media and a way to contact her. She wants some of her content to be featured in a bigger way than other secondary content (for example, she has some scores she wrote featured in a trailer and a music video for a popular band she produced vs. work lesser known work). She also wants some information about her process and philosophy on composing. She would also like to highlight her primary skills (composition, producing and performing) in a visual way.

Step 3: Begin sketching

You then translate your hierarchy into a design

Step 3: Begin sketching

You then translate your hierarchy into a design

Step 3: Begin sketching

You then translate your hierarchy into a design

Sketching

UX Sketching

Benefits of sketching

● Impossible to get bogged down in details while sketching● Allows you to quickly iterate - idea generation

Basics

● Lots of paper, pens and markers (highlighters and ideal)● Define your goal - don’t sketch your entire website at once. Select one page or

flow and focus on that.● Set a time frame - the point of sketching is to work fast and not get into details.

Timeboxing can prevent over complicating

Step 1: Draw a Frame

Step 2: Add the biggest and most basic elements

Menu, footer, main content

Step 3: Add Details

Add relevant details but keep them simple at this stage

Step 4: Add Shadow and Bevel

Make the sketch visually appealing and scannable with low effort

Step 5: Add Annotations and Notes

Document simple functionality or ideas

Homework

Create a sketch using the hierarchy defined in class

Use paper - no iPad sketches

Use the steps we outlined - must include shadow and bevel