advertisement

Designing for Web 2.0: The Visual Ecosystem

50 %
50 %
advertisement
Information about Designing for Web 2.0: The Visual Ecosystem

Published on May 21, 2007

Author: lukew

Source: slideshare.net

Description

In the presentation I point out how the ability of visual communication to express core customer and brand messages across multiple forms of media has not changed much. However, shifts from locomotion to services, from pages to rich interactions, from sites to content experiences, and from content creation by webmasters to everyone online have introduced unique opportunities and constraints that the presentation layer of Web applications needs to account for.
advertisement

DESIGNING FOR WEB 2.0: THE VISUAL ECOSYSTEM LUKE WROBLEWSKI WEB 2.0 EXPO, APRIL 2007 1

Luke Wroblewski Yahoo! Inc. • Senior Principal, Product Ideation & Design LukeW Interface Designs • Principal & Founder • Product design & strategy services Author • Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) • Functioning Form: Web applications, product strategy, & interface design articles Previously • eBay Inc., Lead Designer • University of Illinois, Instructor • NCSA, Senior Designer http://www.lukew.com 2

3 PHOTOS BY SLING@FLICKR, JELLYMON, YOONHEE_KOO, SPLORP

WITH WEB 2.O EVERYTHING’S DIFFERENT… 4

5 PHOTOS BY * BEEZY *, STRIATIC, STEVE RHODES, N8AGRIN, ELECRO_N, WILL PATE

SO MAYBE NOT EVERYTHING IS DIFFERENT. 6

How We Use the Web “Look around feverishly for anything that is interesting or vaguely resembles what you are looking for, and is clickable.” -Steve Krug -Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability 7

Design Considerations Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability • Presentation: How your application appears to your audience • Interaction: How your application behaves in response to user actions • Organization: The structure of your application 8

Presentation • All interactions occur through the presentation • Inform users • Establish relationships between content • Guide users through actions • Make organizational systems clear • Provide situational awareness • Maintain consistency to create a sense of place • Effectively convey brand message to your audience • Emotional impact • Engage and invite • Provide a unique personality 9

What Makes a Great Presentation? • Visual Organization • Communicates the relationships between user interface elements • Enables Interaction Design • Information Design • Personality • Communicates the brand essence of a product • Visceral design • Color, font, image, pattern selection 10

The End Goal • Quickly Communicate • What is this? Usefulness • How do I use it? Usability • Why should I care? Desirability 11

SO WHAT IS DIFFERENT? 12

WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 13

WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 14

WAYS WE INTERACT WITH THE WORLD: • Locomotion • Conversation • Manipulation -TERRY WINOGRAD, STANFORD 15

Web Transitions 1. Locomotion to digital representations of physical entities • Directories & portals, Yahoo! • Company sites & brochure-ware 2. Digital manipulation of physical goods • E-commerce everywhere • Amazon, eBay 3. Digital services • Enable conversation & manipulation • Display surfaces • Content creation • Aggregation • Entertainment -Types of digital services: TOM CHI, YAHOO! 16

MEANINGFUL PACKAGING DESIGN SHOUTING FOR WEB BACK OF PACK APPLICATIONS UNPACKING EXPERIENCE 17

DIFFERENTIATE MEANINGFUL ATTRACT SHOUTING EMBODY THE BRAND 18

19

SUPPORT THE STORY BACK OF PACK OUTLINE BENEFITS & FEATURES 20

21

UNPACKING EXPERIENCE 22 PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN

23

24

LOCOMOTION SERVICES • Visual design considerations • Meaningful shouting • Back of pack messaging • Impactful unpacking experiences 25

WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 26

Ajax Interface Design 27

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. 28 BILL SCOTT, DESIGNING FOR AJAX

INVITATION TRANSITION FEEDBACK 29

PAGES RICH INTERACTIONS • Visual design considerations • Invitation: communicate potential • Transition: illustrate manipulation • Feedback: success, progress, errors 30

WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 31

• Content Creation Tools • 120,00 new blogs created each day -4/07 • Content Aggregators • digg hits one million registered users -3/07 • Display Surfaces • MySpace number one site in page views -12/06 • Entertainment • 100+ million daily streams on YouTube -6/06 32

Sites Content Objects Emergent Networks: open, inexpensive, Hierarchies: management, military simple, close enough Examples: closed, expensive, complex, Examples: crowds, friends, incidental accurate networks, ANDREW HINTON’S ARCHITECTURES OF PARTICIPATION 33

34

24% CONTENT 76% SITE OVERHEAD 35

36

37 HTTP://FLICKR.COM/PHOTOS/BRYCE/58299511/

38

39

SITES CONTENT EXPERIENCES • Visual design considerations • Primary focus on primary content • Secondary focus on related and relevant content & actions • Visual interest captures attention (avoid clutter & visual noise) • If expectations are met • People look around the page • Relevant calls to action are welcome • When content is distributed or remixed • Core principles of visual communication still matter: personality & visual organization 40

WEB 2.0 SHIFTS LOCOMOTION SERVICES PAGES RICH INTERACTIONS SITES CONTENT EXPERIENCES WEBMASTERS EVERYONE 41

42

“Most user-created content is crappy. As we create better tools, we’ll increase the value of the output of those tools.” -Will Wright 43

WEBMASTERS EVERYONE • Visual design considerations • Supporting personal aesthetics • Tools for expression: easier to do the right thing, remain flexible & robust 44

Summary • Web is a visual medium • Visual organization & personality • Look to existing models for cross media brand management • Locomotion to Services • Packaging Design for Web Applications • Page to Rich Interactions • Invitation, Transition, Feedback • Sites to Content Experiences • Landing page design • Webmasters to Everyone • Enable self-expression • Better content creation tools -Types of digital services: TOM CHI, YAHOO! 45

For more information… Functioning Form www.lukew.com/ff/ Drop me a note luke@lukew.com 46

Add a comment

Related pages

Designing for Web 2.0: The Visual Ecosystem - InformationWeek

In the presentation I point out how the ability of visual communication to express core customer and brand messages across multiple forms of media has not ...
Read more

Web 2.0 Expo 2007, April 15-18, 2007, San Francisco ...

Designing for Web 2.0: The Visual Ecosystem. Luke Wroblewski, Principal Designer, Yahoo! Social Media Track: Design and User Experience ... With Web 2.0 ...
Read more

LukeW | Web 2.0 Expo: Designing for Web 2.0

Additional Information; Web 2.0 Expo: Designing for Web 2.0. by Luke Wroblewski April 20, 2007. In my Designing for Web 2.0: The Visual Ecosystem talk at ...
Read more

[웹2.0엑스포] 6. Design & UI Track : The Visual Ecosystem

Designing for Web 2.0 : The Visual Ecosystem ... 가장 먼저 웹2.0이 도래하면서 디자인에서도 모든 것이 바뀔 것이라는 말로..
Read more

PDF Bücher und Dokumente gratis downloaden - Dr. Web

Die Broschüre zum Web 2.0. „Blogging, Ajax, Wikipedia, Flickr: ... Designing for Web 2.0: The Visual Ecosystem Luke Wroblewski: ...
Read more

Create a Professional Web 2.0 Layout

In this Photoshop tutorial we're going to learn how to create a web 2.0 layout, ... Visual Effects; ... Create a Professional Web 2.0 Layout
Read more

Web 2.0 Expo 2007, April 15-18, 2007, San Francisco ...

Conference By Track. Web 2.0 Expo will feature 7 ... Web 2.0 Edition; Designing for Web 2.0: The Visual Ecosystem; Embracing the Chaos: Designing For and ...
Read more

LukeW | Event: Web 2.0 Expo 2007

Event: Web 2.0 Expo 2007. by Luke Wroblewski April 13, 2007. On Wednesday, April 18, ... My talk is on Designing for Web 2.0: The Visual Ecosystem:
Read more

Designing For Web | LinkedIn

View 36239 Designing For Web posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. ... 2 Visual Design; 3 Illustration;
Read more