web ux landscape (and all points in between...)
TRANSCRIPT
23,916
Web Landscape Tour1. UX vs. UI vs. “Web Designer”2. Design Thinking3. What is the “Web”4. How to think about the industry5. Q&A Time
User Experience
User ExperienceA person's perceptions and responses that result from the use or anticipated use of a product, system or service
User Experienceon the web
UIUser Interface
IAInformation Architecture
Pattern Libraries
UI + Developers
Usability Testing
ONE DOES NOT SIMPLY
DO ALL OF THIS STUFF
ONE DOES NOT SIMPLY
DO ALL OF THIS STUFF
What is the “WEB”?
Websites+ Web Apps
+ Your Phones+ Other Crap Too...
CONTEXT
81% of Americans between the ages
of 25–34 own a smartphone.
42% of smartphone owners
between the ages of 18–29 consider their phone as their
primary way of accessing the internet.
Where are people using mobile devices?84% at home80% during miscellaneous downtime throughout the day76% waiting in lines of waiting for appointments69% while shopping64% at work62% while watching TV (alt. study claims 84%)47% during commute in to work
Source: https://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
Why?Does any of this matter?
Apps vs. Weball the same stuff....
Today’s web is the
MOBILE WEB
Responsive Web Design
Responsive Web Design
Responsive Web Design
Some Basics
Think Mobile First
Mobile Web is Squishy
Think Mobile+Content First
Think Mobile+Content+Context First
Apps vs. Webdon’t make silos for your content...
Start mobile site then expand to be the full site.
http://www.snopes.com/history/american/gauge.asp
“Web” Design Landscape“Web” Design Landscape
+
UNITE THE CLANS
Designer or UX or UI or
Interaction Designer or Web Designer or Web Developer or
Frontend Designer or Frontend Engineer
All The Same THINGS
PortfolioBased
Web Developer
Web Developer
Frontend Engineer
UI/UX Developer
Frontend Designer/Developer
Frontend DeveloperIBM Design in Austin, TX
https://jobs.github.com/positions/6107bb14-191d-11e5-9060-f0d7dcf002cf
• Front-End Development: Coding valid HTML, CSS, JavaScript, and jQuery
• Visual Design: Understanding the use of color, grid, layout, and typography
• Mobile Integration: Creating consistent experiences through responsive layouts, touch
interactions, and input techniques
• Project Management: Incorporating iterative design, agile practices, and software
development life cycles
• Information Architecture: Planning experiences through site mapping, modelling, and
wireframes
• Interaction Design: Building flow, form design, micro-interactions, and transition
animations
• Copywriting and Content Strategy: Writing microcopy, content modelling, and content
inventories
• User Research: Conducting field research, usability studies, research synthesis, and data
analysis
http://centercentre.com/blog/2013-12-05-welcome-to-unicornicopia
CenterCenter Design Poll
For example, let’s take the field of graphic design. Say you’re a small company with a great idea and
you’re ready to hire a designer to build out your website. A standard graphic designer might show you a
portfolio of beautifully designed website images that look fantastic. A unicorn graphic designer will take it
much further:
• Not only did they do the visual design, but they are then able to turn that into code and build out the
website itself
• They have deep knowledge of user interaction (UI), going beyond the look and feel and delving into
best practices for how users interact with everything from menus and buttons to links and colors
• They’ve already thought several steps ahead in terms of the mobile experience, ensuring that your
site will look great on phones, tablets, laptops, and large monitors
• The content on the sites they show you isn’t filled with Lorem Ipsum placeholders, but copy that they
wrote themselves… typo-free, grammatically correct, and with a friendly but persuasive voice that
compels the user to take action
• And what’s that? You have a company softball team? Turns out they were all-state in high school,
can play any infield position, and hit .425 with 24 homers their senior year
http://www.salary.com/become-a-unicorn-employee/
The Unicorn “Designer”
Devsigner
UX CONCEPTSFrom The Gallery
UnmatchedStyle.com
Call-to-Action
Microcopy
It’s all in teh details...
Good Microcopy
Good Microcopy
Design for Errors
facebook.com
“OnBoarding”
Twitter’sNew User Experience
OnBoarding&
Gamification
If it looks fast...
Looks FASTLooks FAST
Mental Model
Don’t Lose It...
Affordance“Perceived” Affordance
when it comes to website design.... The man Don Norman.
Affordance“Perceived” Affordance
when it comes to website design.... The man Don Norman.
Gestalt
Case Study
Confusing
Case Study
Avoid Failure Loops
