Holistic Web Design: Finding the Creative Balance in Multi-disciplined Teams

The whole is greater than the sum of its parts. You'll see how accessibility, content, CSS, information architecture, JavaScript, usability, visual design, and XHTML create better experiences by working together rather than alone.

Moderator: Garrett Dimon Information Architect, GarrettDimon.com

- Shaun Inman haveamint.com
- Jason Santa Maria Art Dir, Happy Cog Studios
- Carl Sieber User Interface Designer, fd2s Inc
- Eris Stassi
- Garrett Dimon Information Architect, GarrettDimon.com

Transcript

1. Holistic Web Design
   Finding the Creative Balance in Multi-Disciplined Teams
   1
   - Welcome. (Virtual Stan?)
   

   View Slide

2. The Idea
   5 People. 5 Cities. 5+ Disciplines.
   2
   Intros - ABC Order :)
   1. Garrett - Interface Designer, Writer for Digital Web (Little of everything & accessibility.)
   2. Eris - Interface Designer @ Apple (ID)
   3. Shaun - Creator of Mint and the original IFR (Scripting)
   4. Carl - Some guy named Carl. (Markup & CSS)
   5. Jason - (Visual Design)
   - We wanted to generate conflict. We failed miserably. Everyone got along and the opinions blended together well to create better ideas.
   - Some conflict.
   

   View Slide

3. Holistic?
   ho·lis·tic (adj.)
   1. Emphasizing the importance of the whole and the
   interdependence of its parts.
   3
   - What do we mean by Holistic Web
   - About viewing a project as a whole.
   - It's about a balance and zen state where all areas are equally important.
   - It's about balancing design, usability, accessibility, LOE, information architecture, making concessions in one area to improve another and the overall experience.
   - Being able to make an informed decision about when one aspect trumps another.
   

   View Slide

4. The Myth of
   Separation
   Business
   Design
   Accessibility
   Structure / Markup
   Scripting
   Presentation / CSS
   The Big Picture
   +
   _________________
   4
   - Good clean markup is the foundation.
   - The layers aren’t separated.
   - Imagine redoing only the visuals without modifying the code, adding progressive enhancement scripts without modifying the markup, making a site accessible without the help of visual design or improved
   markup, etc.
   - Getting experienced specialists involved sooner helps bring different perspectives to the table.
   

   View Slide

5. Involve everyone.
   But know when you’re hindering instead of helping.
   5
   - Different backgrounds and specialties bring different things to the table.
   - The more diverse the ideas, the more choice you have in selecting the strongest ideas.
   - There’s always the possibility of having too many cooks in the kitchen.
   

   View Slide

6. Share, Communicate,
   and Educate.
   (Within reason.)
   6
   - A significant part of holistic design is making other specialists aware of the value and benefits of the other specialties.
   - For instance, teaching an engineer about the subtle details of markup or a designer teaching an accessibility guru about movement and balance in a composition.
   - The more this happens, the more respect different groups will have for each other.
   

   View Slide

7. Respect everyone.
   (It’s corny, but it’s true.)
   7
   - Problems arise when specialists don’t respect other specialists.
   - i.e. engineers may think designers only make things pretty, Designers may not be concerned with accessibility at the cost of a “better” design.
   

   View Slide

8. Compromise.
   But stand up for your ideas.
   8
   - Understand that there will be compromise.
   - If you feel very strongly about something, put a reasonable amount of effort in illustrating your beliefs and convincing the rest of the team.
   - i.e. Eris convincing us that Plazes was the ideal site.
   

   View Slide

9. Remember the big picture.
   But don’t forget the details.
   9
   - Leave personal pride and biases at the door.
   - Every team project is larger than individual team members, and for a team member to think their area is always more important than another is often due to pride.
   

   View Slide

10. Plazes.
    10
    - Clear that there’s room for improvement.
    - Definitely done by technical people.
    - How we chose the site
    

    View Slide

11. Communication
    5 Cities and 4 Time Zones
    11
    

    View Slide

12. Group Chats with
    the Entire Team
    Email Iteration
    12
    

    View Slide

13. 3rd Party Integration
    It’s never as simple as you want.
    13
    - Google maps caused some accessibility challenges.
    - Integrate early. There WILL be pain points.
    - 3rd Parties rarely compromise. Being aware of this and addressing it early is always important.
    

    View Slide

14. Idealistic
    Timeline & Dependencies
    Parallel Development & Integration
    14
    - You don’t need to be afraid of working in parallel and integrating later.
    - This requires a bit of communication, but with some experience and expectation setting, it’s entirely possible.
    - It will cause some rework and effort, but with the right coding practices, you can minimize the inefficiencies.
    - It’s not ideal, but it’s not as bad as you’d expect.
    - Good code and modularity with good communication can mitigate the pain suffered by following this process.
    

    View Slide

15. Real
    Timeline & Dependencies
    Parallel Development & Integration
    14
    - You don’t need to be afraid of working in parallel and integrating later.
    - This requires a bit of communication, but with some experience and expectation setting, it’s entirely possible.
    - It will cause some rework and effort, but with the right coding practices, you can minimize the inefficiencies.
    - It’s not ideal, but it’s not as bad as you’d expect.
    - Good code and modularity with good communication can mitigate the pain suffered by following this process.
    

    View Slide

16. Down to Business
    Interaction Design & Information Architecture
    1
    15
    

    View Slide

17. 16
    - These are great because they let you focus on the content and not get caught up in design
    

    View Slide

18. 17
    - Lets you get a little more detailed and design modules if it’s a valid exercise.
    - Leaves the designer a significant amount of flexibility in the design and layout.
    

    View Slide

19. Gettin’ Pretty with It
    Identity, Visual Design, etc.
    2
    18
    - Design is an area where it’s very easy to have too many cooks in the kitchen.
    - With reasonable expectations, the team should always feel comfortable, and encouraged to provide ideas and feedback even if it’s not their area.
    

    View Slide

20. 19
    - Lots of ideas and iterations on logos were inspired from the diverse comments of the whole team, but in the end, it didn’t work
    - Jason made a command decision that the push pin wasn’t working. Despite how excited everyone was about the concept, we understood.
    

    View Slide

21. 20
    - Everybody provided their input and discussion
    - Ended up with the identity with the most personality.
    

    View Slide

22. 21
    - Lots of group iteration and passing things around.
    - Everybody provided input, but the group discussion worked out the good and bad for various reasons
    

    View Slide

23. You are here.
    Friend
    Person
    Favorite Plaze
    Plaze
    Iconography
    22
    

    View Slide

24. Coding the Beast
    Markup & CSS
    3
    23
    

    View Slide

25. Goals
    1. Valid XHTML & CSS
    2. Less is More
    3. Provide Hooks for Shaun
    24
    

    View Slide

26. Tips & Tricks
    Comment those closing divs.
    25
    Closing comments:
    I’m embarrassed I didn’t think to do this sooner. Cleans the code up nicely. Easy to read and prevents confusion in complicated pages.
    

    View Slide

27. Tips & Tricks
    Forms are tags too.
    26
    

    View Slide

28. Scripting & Maps
    Integration
    4
    27
    

    View Slide

29. Markup + Scripting
    Minimize touch points. Maximize flexibility.
    28
    

    View Slide

30. Scripting. DOM Scripting.
    29
    - Would be extremely difficult to integrate with bad code.
    

    View Slide

31. Scripting + Design = Better Range Finder
    30
    - Shaun could have easily just scripted the basics and made the range finder work, but instead, he went above and beyond by improving the design at the same time.
    - Inverting this
    

    View Slide

32. Scripting + Design = Better Buddy List
    It’s like instant messenger.
    31
    

    View Slide

33. Almost there.
    Iterate and Enhance
    5
    32
    - It’s never too late to make changes.
    - Things change, goals shift, projects have moving targets.
    - It’s often easy to get irritated by numerous change requests and hurt the team dynamic.
    - Good coding standards and modular code makes it easier to make changes.
    

    View Slide

34. Thanks to accessibility guru Derek Featherstone for additional insight.
    Keyboard
    Navigation
    More than
    Markup
    Low Mobility
    Device
    Independent
    Text Equivalents
    Low Sight
    No Sight
    Accessibility
    33
    - A very unique challenge presented by the Map interface
    - Different types of accessibility (Lower vision, Blind, Mobility, Keyboard Navigation, etc.)
    - Text equivalents (Distance & Direction, 4.3 miles due north of you)
    - Repeating “Searched” Values
    - Contrast
    - Mobility
    - Keyboard Navigation
    

    View Slide

35. The Home Page
    a.k.a. The Salesperson
    34
    

    View Slide

36. The Home Page
    a.k.a. The Salesperson What’s
    this?
    Maybe they
    should call it
    “Stalkr”.
    Where do I
    register?
    34
    

    View Slide

37. View Slide

38. 1
    3
    4
    2
    36
    1. Map & What is this - This IS Plazes. This content should be forefront and set expectations
    2. Near You - This gives a quick glance at how prevalent plazes is. It should use IP addresses to select a plaze as close as possible to the person.
    3. Selling Info - People are going to have questions, these paragraphs try to address that.
    4. Register Now - This is given a bit more visual emphasis.
    

    View Slide

39. The Dashboard
    Me. Me. Me.
    37
    

    View Slide

40. The Dashboard
    Me. Me. Me.
    I’m Stan. Who are
    these other people?
    What’s a
    37
    

    View Slide

41. 2 3
    1
    4
    38
    1. Navigation - The IA and relationships/hierarchy aren’t communicated very well here. For the most part, what I really want is my stuff. I’ll search if I want to find people or plazes.
    2. Who are all of these people? Are they close to me? Are they stalking me?
    3. Poor use of real estate. If I haven’t used the launcher, put a link to the launcher and tell me how to get it. Encourage me to start participating.
    4. What is this a picture of? Does it have anything to do with me?
    

    View Slide

42. 2
    6
    3
    4
    1
    5
    39
    1. It’s all about the map. The map becomes the centerpiece of it all.
    2. I’m really only concerned about my online friends. As long as I have quick access to all of my friends, I’m cool with that.
    3. The navigation is simplified and all about “you” instead of being overwhelming.
    4. Simple map controls and options let you decide what you want to see.
    5. Quick information about your account always accessible.
    6. Constant easy access to search.
    

    View Slide

43. A Plaze
    Isn’t this what it’s all about?
    40
    

    View Slide

44. A Plaze
    Isn’t this what it’s all about?
    Free wi-fi!
    Suckers.
    This plaze
    has terrible
    food.
    RSS,
    Mashup, show
    me the web
    2.0!
    40
    

    View Slide

45. 1
    2
    3
    4
    41
    1. This puny little map does nothing. It’s too crowded and zoomed in.
    2. Comments aren’t immediately intuitive or obvious. This is a potentially very valuable aspect and needs more attention.
    3. Why does a single flickr photo get so much attention?
    4. The actions are intermingled within meta data and not easily identifiable.
    

    View Slide

46. 1
    2
    3
    4
    42
    1. It’s all about the plaze and its meta data.
    2. Comments get more attention.
    3. A more appropriate use of flickr photos as well as more intuitive links for adding and viewing photos.
    4. Tags and additional actions are always in a consistent location relative to the rest of the site.
    

    View Slide

47. Let’s see it!
    (Drum roll, please.)
    43
    

    View Slide