Select based on need, problem. Screen to screen prototypes, Micro interactions design.
Pen & paper sketch concepts, using design tools/ web based tool. Create interactive prototypes to validate ideas. Put prototypes in hand of the people, real users. You’re evaluating a design solution, not launching the end product.

Newer additions:

Framer.js - Origami - Axure RP - Atomic - Pixate - Flinto - Invision - Proto.io - Justinmind - UxPin

Generating Ideas

For a product that is already out in the market

A/B or multivariate testing
Web analytics, visual analytics
User interviews - Observe people
Sketch idea

Documents created and used by interaction designers

Type of documents:
Low fidelity
High fidelity
User research
Personas
Prototype testing
Design surveys
Analysis
Flow diagrams
PRD, BRD, SRS

Be flexible, understand goals & then select method & documents.

Diverse backgrounds leading to the field of IxD

No single path to being an interaction designer. Work spans in fields of:

Software, technology, improve verbal & written communication skills, work in teams, participate in research.

Essentials - People Technology Design

Five core principles of interaction designs

Consistency

2. Perceivability

Affordances vs. Signifiers

3. Learnbility

4. Predictability

If we observe people interacting with an interface or device, we can often determine if they understand it, and are able to predict outcomes or not. Random interactions, guesses, trial and error, failure to make consistent progress toward a goal, and even the failure to interact at all, typically mean that the opportunities for interaction are not perceivable, meaningful, or predictable.

{Gaming}

5. Feedback

Understanding Context & Motivation

Need - Understanding the context of experience (context sensitive design)

2. Motivation

3. Persuasive design - Engage by enhancing motivation.

Reciprocity

People feel that your device/interface has made a change, they will share their experience.

Commitment

People identify themselves to identify themself & commit to worthwhile contribution

Conformity

We observe what others are doing & copy them. Trends

Authority

People obey follow authority. Influencers

Liking/Following

People believe people they like, social network

Scarcity

Limited availability is a powerful motivator

Principles of interface structure

Gestalt Principle OR the principles of grouping

The law describes why & how we perceive the world as filled with whole distinct objects. These are not rules for how to design. When we encounter devices or interfaces that are vague, ambiguous, and difficult to understand, we can use the Gestalt Laws to help us identify the source of the confusion, then develop ways to improve the design, and ensure that people are perceiving the device or interface in a clear and understandable way.
Read more:
https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/

Law of Figure ground - How we organize our perception. Tree/Sky image

Law of Pragnanz/ law of simplicity - Why would our brains expend the effort necessary to process overly complex perceptions, when it easier and faster to perceive things in a simpler way?

Gestalt Laws:

Law of proximity - Distinct group
Law of similarity - Form color size
Law of closure - Incomplete figure perceived as full
Law of continuity - Object aligning on curve, smooth path
Law of common fate - Objects moving together are perceived to be
Law of symmetry

Grids

We have discussed grids during the MD class. The base principles & use remains the same.

Guiding visitors with sequence, steps, and structure

For consistency, learnability, predictability

Typography can guide eye

Understanding design patterns

We have learned about pattern libraries during the material design session (reusable graphics, modules to copy from) We have also seen the pattern lib. Sketch provides for each platform.

Carousels, accordions, pop ups, hop ups - We use all of these & a lot of patterns already in our designs.

Anti patterns are the patterns that hinder the experience. These are bad solutions to the design solutions. Antipatterns exist because of wrong design solutions to problems or when a relevant solution is wrongly applied. Example - Drag & drop an object - see the object being placed in the new position - System giving alert says Block successfully placed.

Dark patterns are fake intentional design decisions created to mislead us so we do an action that we wouldn't do or not in our best interest. Warning messages or misleading copy on EXIT.

Design pattern libs -

Effective navigation

Sitemaps or site architecture - Show navigational path around pages. (not in page links). Capture the structure of the site.

Information architecture

Taxonomy

Hierarchical structure of information (Level based information division)

Metadata

Descriptive details about the content which is not a part of any hierarchical structure. Tags, labels, attributes etc.

Contextual links

Text links, tabs, btns

Sequential navigation links such as Next Previous on a photo gallery.

Make sure these elements have a hover & pushed states.

Question: How deep is too deep? If something takes 8 clicks to get completed, it is good or bad UX, faulty IA?

Search & filter/Sort

Natural language search OR natural keyword search

Auto suggest - Context, past searching behaviour, presented in groups

Sort & Filter - Common on ecom site

Filters -

Subtractive filters - Decreasing the size of the result set
Additive filters - Increase the size of the result set (&)
Matching results provide feedback
Present results as a List, grid, hybrid, table depending on the product (airline, ecom, image search grid etc.)

Show the results in smaller set for faster loading. Use pagination or infinite loading.
Never do a horizontal scroll on search results
SEO - Rank & Placement for natural or organic search based on keywords
SEM - Paid placement & ads

Contextual relevance

Provide people contextually relevant info when they need it. These can be the
In time tips that appear on mobile apps
Shortcut links that take users to different sections if needed.
Contextual menus that open up when you require them for example a size cal. On a ecom site or ticket booking site or calculator on banking site
Dynamic layers - Layers of functionalities on top of each other - moving horizontal, not just up & down. Complexity hidden behind the dynamic layers for an easier looking/feeling interface.
Always make sure “Return” is visible/understandable.

10 Heuristic principles

Part 2

How people respond to images

Sensation and perception

Sensory data for mental representation of the object

We can not control the way someone senses and perceives their world but we can craft designs that make it easier for people to understand information & how to interact with interfaces & devices.

Red & Orange attack our attention.

We are physically less sensitive to BLUE, INDIGO, PURPLE than any other colors.

How do people respond to motion?

First time loading non logged in:
https://www.dropbox.com/s/wzppuy4bxd4on5b/current%20first%20time%20loading%20non%20logged%20in.mov?dl=0

First install:
https://www.dropbox.com/s/khhcob7gnvv0pei/first-install-loading-issues1.mov?dl=0

Solutions:

First time
https://www.dropbox.com/s/2xja63jrmllc9da/expected%20onboarding-first%20time%20load%20non%20logged%20in.mov?dl=0

https://www.dropbox.com/s/nhyck8ltki11vc5/start-home-v1.mov?dl=0

Loading variation(+ animation):
https://www.dropbox.com/s/zigvczwgip2rxbt/expected-animated-loading.mov?dl=0

Principle for Mac

https://www.dropbox.com/s/4i84m4aipikg2hh/01_Interface.prd?dl=0

Understand the principle interface

Properties - Context sensitive
Artboards - Import from sketch
Preview panel - Test as you go along - Hide/show from view menu
Top canvas - Rec/Txt/Artboard
Driver - Separate subject
Animate - Timeline - Motion from 1 artboard to other - properties to change
Import items from Sketch - Useless btn
Grouping - CTRL+G
Mirror - iOS mirror

Create a new artboard

Create
Select
Name
Change preset
You can not have various size artboards in one project

Adding content into artboard

File - https://www.dropbox.com/s/6tcnckqya37ppby/02_AddContent.prd?dl=0
Assets - https://www.dropbox.com/sh/518v0tjru9f59fg/AADMdhnEQYnpSzowsSxl63Qva?dl=0
Drag & drop images from folder to canvas or get from sketch (make exportable vector)

Understanding timeline - https://www.dropbox.com/s/24pvun9fewfvm56/expected-loading.prd?dl=0
Creating animation

Animate between artboards
Animate properties
Opacity 0% means hidden - Layer turn on/off doesnt work
Make a TAP event & drag to artboard two
See the timeline now
Test in the viewer
Keep the same layer names for handle
Test or share your work

Scrolling, easing, zooming

Module challenge

Create onboard animation for the habits app. Wireframes are on the assignment Gdoc.
Principle app reference: http://principleformac.com/gallery.html

Part 3

Shaping thinking and decision through design

Designing for behavior & interaction

Best practices for providing feedback

Lesson 5 Tools

Sketch overview

Powerful app for mac, lots of features
Look around the interface

Toolbar on top
Top left +

Shapes - L/R/O
Text tool
Artboards
Symbols - Reusable for style guide components (btns)

Left panel

Layers panel - Associated withe page the layer is on.
Name of layer

Inspector

Position
Size
Transform

Text style & all the options below

Artboards

Canvas or work on artboard
Default templates, design at 1x
Check the symbols

Plugins

Craft https://www.invisionapp.com/craft
Sketch-pallets https://github.com/andrewfiorillo/sketch-palettes
Icons - use icons from same family

Color palette

Open sketch file
Add each color to the document color palette
Color picker - CTR C
Save palette to plugin - california.sketchpalette

Symbols

Tab bar, nav bar

Grid

Android/iOs

XD - Invision - Craft - Figma - Sketch

Sketch tuts

https://www.youtube.com/playlist?list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS

Figma tuts

https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA

Lesson 4 Notes Material design

Figma Android UI componets- https://www.figma.com/file/MYYBYQpg86FQsI0jnBTyAg/Google-Material-Design?node-id=0%3A1046
Discuss the Google slides on comp/patterns study
https://docs.google.com/presentation/d/1Du0nMnRK3dkwd0B-fJd1R7V8oszdtesLNqt0_xDSrjI/edit?usp=sharing
Work on wireframes - Mine are here on dropbox
https://www.dropbox.com/s/ospopfmlbbpbuem/%20Mobile%20UX-flow.sketch?dl=0
Conduct user interviews either in person or via a phone or video call (12 participants min.)
User research & data reference
https://docs.google.com/spreadsheets/d/1KEDjQmM1mRKUQ4qSrbgX7G1ZTFGoMRLWCcCIkHfAEO0/edit?usp=sharing

https://docs.google.com/a/theviralfever.com/spreadsheets/d/1a0fu4mrPMqKg8xnMSlNwPFLLMAAX_9_B7JUUsif1oqc/edit?usp=sharing

What does a typical user look like?
What are their reasons for using the app?
What keeps them coming back?

Analysis of the research data

Find out what is working (Top 3)
Find out what is not working (Top 3)

In class study material: https://medium.freecodecamp.org/i-wanted-to-see-how-far-i-could-push-myself-creatively-so-i-redesigned-instagram-1ff99f28fa8b

Lesson 3 Notes
Material design introduction

Intro

Pay close attention to material design guidelines for alignments, drop shadows, interactions, and motion in the app prototype presented below. The goal is to build a user interface that is not only consistent with the rest of Android but also enjoyable to use. (Why understanding MD is imp).

https://www.dropbox.com/s/0skfnb0vcmvnu3n/v1.mov?dl=0

MD : A visual language

We all speak a language. It's how we communicate with each other. In the same way, UI also needs a medium through which it can communicate to the user. Material Design is a visual language. It's a system for uniting style, branding, interaction, and meaningful motion under a consistent set of principles. It's important to understand these principles and their implications from the perspective of design implementation

Let's look at an overview of these principles. The three principles of Material Design are material metaphor, bold graphic design, and meaningful motion.

Material metaphor

https://www.dropbox.com/s/svp79u3m9ri4tr3/v2.mov?dl=0

What is the material? What are our apps made of? The general idea is that everything is a sheet of hypothetical, quantum paper in a 3D environment. These sheets of paper can change shapes, merge, split, lift up, or sink down.

But they also obey a set of physical constraints. For example, they should never bend or fold. In this environment, our app consists of tangible objects that stack naturally. These objects react to user interaction, such as touches, in a delightful way. Android Lollipop provides native support for this behavior.

Material design language

The second principle is about grids, typography, and colors.

Material Design provides a rich set of color palettes, standardized typefaces, and guidelines on how to use images and align UI elements. The goal is to create a bold, graphic, and immersive user interface that adapts to any usage scenario.
https://material.io/guidelines/style/color.html

Units & measurements

Distances in android system are not measured in terms of pixels but in terms of a unit called “Density independent pixels” or dp. (iOS applies this same idea but calls it “point”.

DP -
Why not pixels?
Screens can be different. Big, small phones & screens. If pixels are used, then we end up having inconsistent UI on every different phone. Compare a btn 40px btn on two different devices. One dp measures to the same physical size no matter how many pixels can fit into the screen.

SP-

Used for settings font sizes. User can configure how much a SP measures in accessibility settings.

https://material.io/guidelines/layout/units-measurements.html#

Images scale across different platforms

Images can be scaled to look the same across different screen resolutions by using these ratios:

Grids & Keylines

Take a look at this example. Would you say this is a well done design? What don't you like about it? When designing user interfaces, we shouldn't randomly cram the screen with all the elements. Instead, we should use wide spaces to segment the information on the screen and create a visual rhythm that pleases eyes and makes the information easier to process by the human brains.

https://material.io/guidelines/layout/metrics-keylines.html#

Elevation & drop shadows

Recall that in material world, apps are made of sheets of quantum paper in a 3D environment. It's natural to expect these objects to behave just like sheets of paper in the real world. We can stack paper sheets together and they'll overlap with each other, they also cast shadows, and reflect light. The term elevation is used to describe this special relationship between objects.

Visually, different elevation values render as different drop shadows. An element’s elevation indicates the distance between surfaces and the depth of its shadow. Elevation is the relative depth, or distance, between two surfaces along the z-axis.

Every material object has a resting elevation. It may change it's elevation responding to the user interaction. For example, a floating action button has a resting elevation of 6dp, when it's pressed, it's elevation changes to 12dps. To make sure components behave consistently across apps on the platform, material design standardized the elevation values for common components.

Typography / Color - Refer MD documentation for guidance & tools.

Material motion

Motion is a cornerstone of the material experience. The third principle is that things must move with a purpose in mind. Motion must be meaningful and appropriate, serving to focus attention and maintain continuity.

http://the12principles.tumblr.com/

https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move

Motion is a cornerstone of material design and it is my favorite. Well designed motion can make an app easy to understand and fun to use. Motion can guide users through the important parts of the interface, hint what will happen before an action is performed, alleviate long waits, and add character that gives user moments of delight. On the contrary, poorly designed motion can cause destruction of confusion or make an app feel sluggish or unresponsive.
https://www.dropbox.com/s/8r4givtcipwgulz/v3.mov?dl=0

To help us build great motion, material design provides principles in terms of four objectives, responsive, natural, aware, and intentional. These terms are somewhat abstract. My interpretation is that since material design simulates the real world we live in, we can rely on our experience in physical laws to determine how things should move around and behave. In the material world, an object should promptly respond to user input from exactly where it is triggered.
https://www.dropbox.com/s/md1jvx6vmqisvqw/v4.mov?dl=0

It doesn't appear or disappear instantaneously or move at constant speed, instead it speeds up naturally from its resting place and slows down gracefully at the destination. It doesn't travel in a straight line, instead it moves along a natural arc path. Material is also aware of objects around. It can push away other objects or cling on another object to form a bigger surface.

It can also transform from one shape to another. The movement of the item and its surroundings is carefully arranged in a way that defines their relationships.

Material components & patterns

Android watch
https://www.google.com/design/spec-wear/android-wear/introduction.html

Android
https://material.io/components/android/catalog/

iOS
https://material.io/components/ios/catalog/

Web
https://material.io/components/web/catalog/

Android TV
https://www.google.com/design/spec-tv/android-tv/introduction.html

Task -
https://material.io/guidelines/components/bottom-navigation.html
5 groups
Explain the component/ pattern use & find real world examples (at least 3 examples for each component/pattern). Post Google slides to the #general channel by Friday EOD.

List below:

Lesson 2 Notes
App branding

Intro & Walkthroughs

What is the app intro/ user onboarding? Why is it important to introduce an app?
Teardown of Apple music onboarding http://www.useronboard.com/how-applemusic-onboards-new-users/?slide=1
Teardown of Foursq onboarding
http://www.useronboard.com/how-foursquare-onboards-new-users/?slide=1
Teardown of website onboarding (app + site paradigm)
http://www.useronboard.com/how-duolingo-onboards-new-users/?slide=1

Elements of app branding

Visual strategy or Branding intro
Goes from a simple poster to FB page
When we talk about strategy in the context of design, we are talking about communication strategy. What is the client saying, to whom, and how? Once I know the answers to these questions and the client has agreed on the message, I can start designing. And the best place to start is the logo. The logo is the entry point to the brand. It's the visual expression of a brand's identity and values. It's shorthand, and it tells the viewer who is speaking, and what they believe.
Branding doesn't describe the client's business, it identifies it. The visual system is the kit of parts that give the client a proprietary look. Being consistent with typography, color, images, and style, helps the viewer identify the brand quickly. This also reinforces the brand message. Is it luxurious and rich, serious and stable, or innovative and new? The goal is to combine all these elements.

What are the elements?
The logo, color palette, typography, images, and style, with the right words to communicate a clear message. If it's done well, I should be able to know what the brand is without seeing the name or logo. The process will require frequent check-in with the client. This is collaboration between you and the client. Ongoing communication and review of alternative ideas helps guide the solution to the right message.

What is a brand?
The brand is the promise, reputation, and big idea. It is a highly valued asset. A brand creates emotional connections, good or bad. We respond to brands with loyalty, or reject them. Let's start with the promise. AMAZON, GOOGLE, ENRON, MCDonalds, Starbucks, BMW. Emotional connection, loyalty. The brand is created by the public's perception. And that perception is the result of many elements, from the reputation, actions, promises, customer service, to the product and graphic visuals.

Strategy

Research, interviews, problem solving, competitive analysis

Process

Create visual system with logo.

An identity system is the combination of all the pieces that work together maintaining a singular voice for the brand. The logo is one part, now add a proprietary color palette, choice of typefaces, image style, choice of materials, and copy style. I like to think of an identity system as a set of Legos.

Rules of logo design

Good logos identify, who the brand is, not what is does. Just like your name (Apple - neutral, clear identifier). Visually engaging, strong, clear. Tiny lines, small type hardly succeeds. Make the logo memorable. The logo must be able to exist in variety of media (from billboard to fb post). Logo is not an illustration (identify & not describe). Logo is the entry point to the brand message. Don’t go fixated on logo design only, think the whole brand identity structure.. Always make sure logo is on application with rest of the brand identity system, for example on a letterhead.

Unique wordmark - not simply a typeset but its an icon of a name. Customized refined typeset. Express the brand attributes

Monogram -

Icons

Abstract idea communication, at times ubiquitous. - Apple

Logo

Combine icon & wordmark - reinforce the recognition - merge two in unique way

The process of logo design:

Making a wordmark: 11X17 canvas on AI

Designing monogram

Creating icon connected to the brand message

Combine the selections for the complete logo

Unified logo, harmonious & connected. Shape scale & position

Visual system - Color palette

Make a study of competition color palettes
Find out the dominating palette
Differentiate the brand from other brands
Colors based on brand values & what communicates the attributes of the brand.
Secondary palette to unify the brand. Color combinations. Find color palettes online or get inspiration from a pattern or image or anything else. https://color.adobe.com/
Pallets - Make sure the exact share/value is used for consistency

Typeface

Geometry - Futura, Avenier (perfect geometry)
Explore font combinations - http://typ.io/
Don't use too generic font
Stay with the classic & well drawn typefaces.
http://webtypography.net/toc/

Images

unsplash.com

Patterns & materials - Unique & proprietary look
http://subtlepatterns.com

Creating brand guides for handover
http://downloads.bbc.co.uk/commissioning/site/bbc_music_styleguide_2015.pdf

https://www.dropbox.com/s/pwv3k5sw694zfeo/zivame-online-brand-guidelines_v3.pdf?dl=0

Creating style guides
http://styleguides.io/

The 13 week app rebuilding challenge

Discuss the competitive analysis google sheets - add to slack
Discuss the understanding of selected company - add notes to slack
App breakdown flow wires & module list - see the task details below

Task - Break down your app, create module list

Example of module list
https://docs.google.com/spreadsheets/d/1u6pBy2ukeuV19IQiBddxMKQgI0MvLmnQiCCGzwCkQXA/edit?usp=sharing

Example of app breakdown
https://www.dropbox.com/s/i1tjvg8pglqigkm/schema.png?dl=0

Lesson 1 Notes
Intro & App redesign

Summary

Introduction
Course introduction -
https://docs.google.com/spreadsheets/d/1capYFlK8xVjdB1fTYA5WRYuQWVDQAvlj4nXiOHkSQFI/edit#gid=0
The challenge: To take an application I love and use everyday, then see how far I could push myself creatively as a designer, by rebuilding it from the ground up.

Submission each week
Time Allotment: 10 weeks

About the assignment

Goals

To facilitate a more engaging and seamless experience when it comes to exploring and staying connected
To design a more personable and intuitive user interface
To design through user empathy (HCD)

Goals for own personal development:

Learn how to conduct and analyze user research, create flowcharts and wireframes, design through Sketch, craft animations through Principle, and prototype through Invision
Complete my first design project from start to finish while sticking to my design principles
Roles assumed during the process of building this redesign:
User Researcher
Data Analyst
UI/UX/Interaction Designer
Product Designer

Intro & overview:

Steps to rebuilding an app

Understanding the company
Understanding the competition
https://docs.google.com/spreadsheets/d/1o2qFgwT83Izuq76NUyg5qGSQxwXsq_5fCkYUlPbqutU/edit?usp=sharing
Conduct user interviews either in person or via a phone or video call User research & data
https://docs.google.com/a/theviralfever.com/spreadsheets/d/1a0fu4mrPMqKg8xnMSlNwPFLLMAAX_9_B7JUUsif1oqc/edit?usp=sharing

What does a typical user look like?
What are their reasons for using the app?
What keeps them coming back?

Analysis of the research data

Find out what is working
Find out what is not working
Break down the app - Sketches & wireframes
Understand the underlying IA - App flow diagram - Dummy https://www.dropbox.com/s/5efdnz5fsgv6722/schema.png?dl=0

Problem statements (max 5)
Design solutions
Design rationales/supporting data
Reflection & presentation

OUTLINE

0
Slack team invites

1
Intro, assignment

2
App branding

3 - 4
MD

5-6
Sketch, Figma, XD, Principle, AE, FramerJS,

7-8
IxD

9-10
IxD

Week 11 -
Assignment - submission week 13
iOS components