Post on 22-Aug-2020
transcript
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