Current UX / UI Mobile Design Trends

State of Industry

Client Education & Acceptance (is Key)

Speed of Industry

Internet of Things

Unlimited Options

Apocalypse

Emphasis on User

Brand Context

Time

Ongoing Work /Maintenance

UX Methodology Trends

Participatory Sketching

Opportunity to collaborate with key project stakeholders

Explore, Create & Invent

Identify, create and prove key use cases

Identify Pain Points

Help Build the Brief

Research & Analysis

Rapid Prototyping

Create Rapid Interactive Wireframe Prototypes

Iterate and develop in Lean Agile Mode

Receive and monitor real time feedback from key user demographics

Identifying Contextual Differentiators

Key User TasksContext of ContentCalls to ActionContent Scale and Stack

Key User TasksAgnostic ParadigmsContext of ContentTablet = Browsing / Couch CommerceSite speed, CSS, Retina Images and Resolutions

Action / Task OrientedAgnostic ParadigmsContext of ContentSimplified NavigationWhat the user wants.

TabletSmartphone Desktop

Kill Documentation (time waste)Time wasting on documentation creation

Prototype instead – More Beneficial

Learn More by Prototyping the User Experience

Test & Iterate Quickly

“You can Achieve a big vision – but in small increments.It requires a commitment to iteration”

Eric Ries

The User

What is (UX) User Experience?

“User experience design as a discipline is concerned with all the elements that together make up that interface, including

layout, visual design, text, brand, sound and interaction. It works to coordinate these elements to allow for the best

possible interaction by users”.Don Norman

(UX) Key QuestionsWhy is the product being made?

Who is it being made for?

What are the stakeholders goals for the project?

How do the requirements fit within the wider business objectives of the organization?

Who are the competitors?

How is success going to be measured?

Know Thy User

Users can be, ‘Experienced’, ‘Expert’, ‘Novice’ or ‘Power Users’

The more fluid and responsive the experience is the more emotionally, invested users will become

Ask only for limited input from users

Users are not stupid

Create emotional connections

Users want novelty

Know Thy User

Build healthy long-term relationships with users

User’s will ask why doesn't my brand / site / app know me?

Build users trust incrementally and look for soft commitments along the way

Reduce input forms, user fatigue

Hide technology from the user

Simplicity

Make it feel snappier – always go back to engineering

Reduce chances for users to make mistakes

Stop making people passengers and more partners of the user experience.Stop commanding users what to do

Reduce everything thoughtfully

Tell a Story - User Research

Contextual research

In-depth interviews

Social analytics

Online interviews

Analytics / tracking

Street interviews

Usability Review

Competitor Analysis

Visual Style

Focus Groups

Existing Users

On Location

Third Party Studies

Card Sorting

Create Personas

User Background:Age range, native language, physical and or cognitive limitations

Experience:How familiar are your users with similar systems? Will they need to learn?

Behavior:What motivates users. Do they share any behavioral traits?

Desires and Concerns:What do they want to achieve, what concerns do they have?

Focus on Outcomes Not Deliverables

Real people use your products and services, real people with different wants, needs, abilities, environments and a million other possible variables that need to be factored in…

“Businesses cannot treat their customers as passive consumers any longer, every company is in the user experience business”

“If you take the time to understand how people think, then design solutions around their true needs and behavior – your design will be far more likely to perform better with them.”

http://alistapart.com/column/explaining-water-to-fish

Remember

“Users will never forget how you made them feel”

Maya Angelou

Responsive Design (RWD)

Responsive Design

Still in it’s infancy

Content Dictates

It is ‘Future Friendly’

More Time = More Cost

Content Managed Across All Devices / Screens

Use of Best Practice in HTML5 & CSS3 Media Queries

Many frameworks, templates and solutions

Responsive Design (Sample 1)

boldandnoble.com

Responsive Design (Sample 1)

boldandnoble.com

Responsive Design (Sample 2)

skinnyties.com

Responsive Design (Sample 2)

skinnyties.com

Responsive Design (Mobile Samples)

thisiszone.com starbucks.com cibc.com

Design

Design Trends – Flat UI Design

No drop shadows, bevels, gradients and no depth

Every element is clean, crisp including buttons

and navigation menus

Flat interfaces are easy for users to understand

and interact with

Use simple interface elements such as icons

Simple, easy to click and tap

Simple shapes – rectangle and circles

Use of bold simple Colors

Color of the Year in Web

Pantone Emerald 17-5641

Design Trends – Flat Design – Color Palette

flatuicolors.com

Typography Considerations

Look and Feel of type used should suit the overall tone and message

Use simple font pairings

Flat design uses no more than two font pairings (novelty font for headings)

Use sharp, crisp, bold clear typefaces

San Serif Typefaces are typically used in flat design

Flat design focuses on simplicity – so should your text (content)

Reduce use of drop shadows, gradients – strong color contrast, (black & white)

Give type / paragraphs plenty of room to breathe – lots of white space

Good starting place – Google Fonts: http://www.google.com/fonts

Flat UI Design

Flat UI Design Trends

Flat UI Design Trends

Flat UI Design

Flat UI Website Design

Square:

http://www.square.com

Flat UI Website Design

United Pixel Workers:

http://www.unitedpixelworkers.com/

Flat UI Website Design

Get Cellar App:

http://www.getcellarapp.com/

Mobile First

Mobile First (Project Depending)

No longer an afterthought

Prepares brand thinking for the explosive growth in mobile apocalypse

Forces brand focus and prioritization – under mobile constraints

Allows for new and innovative brand experiences built on capabilities and paradigms of devices

Start with presumptions of connectivity, context interaction, and location

Mobile First (Project Depending)

“The simple guideline is whatever you are doing – do Mobile First”Eric Schmidt, http://bkaprt.com/mf/1

“We’re just now starting to get into Mobile first. What we are finding is that the designers on mobile are really embracing the constraints and that it is actually teaching us a lot about how to design back to the desktop”Kate Aronowitz, Facebook Director of Design, http://bkaprt.com/mf/2

Social Media

Social Media

All Companies are social media companies now.

Key Platforms:

Pinterest, Instagram, Facebook and Twitter.

Social Media - Pinterest

Pinterest:

Female oriented mainly, aspirational – intent to buy (insights), pins drive

traffic to websites – big referrals, more physiological, infographics – shared

and repined and enormous virality and video.

Social Media - Instagram

Instagram:

Take print campaigns online creatively, youth marketing and strong visuals,

storytell visually, promoted grams, more advertising to come, # tactics / be

creative, animated gifs and video.

Social Media - Facebook

Facebook:

Virality, figure out how to storytell, scale in demographics, biggest

opportunities, images matter – it’s a picture platform, infographics, storytell

through photos, quality, calls to action, think mobile, less text, right times to

post, video and animation…

Social Media - Twitter

Twitter:

Jump in on any conversation, you need to listen on Twitter – and jump in

where you can on conversations to add value, a brand can show it cares,

brands gain credit, create enormous context, bring value, build most equity,

huge opportunities in storytelling, listen and engage, bring value – answer

questions, share and re-tweets, need to be witty, smart and engaging.

Glossary

User Experience Design (UXd)How the user thinks and feels

Information Architecture (IA)How the system is organized

User Interface Design (UI)How the content is organized

Interaction Design (IX)How the user and device act and react

Responsive Website Design (RWD)Optimal fluid grid based website design that will flow and stack on any screen size / resolution / device.

Adaptive Website Design (AWD)Web design to scale to predetermined set of screens and devices.