Zeldman: Site Redesign

Event Apart: Day 1 (10.12.09)

“What problem are we trying to solve?” "You get tired of a site before the public does." (Apple, Amazon don’t redesign to redesign…)

 Research helps answer that question: research produces achievable goals  Research makes you a credible partner  Build the relationship before you show design Business Goals & User Needs

Big problem: design looks great until real content arrives; all hell breaks loose

Need to develop content strategy guidelines: suggest tones, voice, lengths

“Alzheimer’s Method”

 Always go back to re-explain where we were, what was discussed, what happened last time

 Remind them what you discussed before (again, relationship building)

Learn to Translate (Interpret questions, comments)

Develop a content strategy/guideline document

Convey the Meaning of Design

Discussions over aesthetic fine points are a problem: discuss MEANING of design

“Ideas not pixels”

Communicate feelings, experience, not just images and art “Contiki” example: nostalgia, web app, or “sex on the beach” (photo-driven, sexy pitch)

Handling Criticism

“That color is ugly” how respond?

Go back to user research, competive audit: what does audience want?

“That button is too big!”

People didn’t know, understand process: button helps solve problem

Listen between the words

Go beyond basic question or comment: what are they really saying??

Is it about the color or the button, a bigger problem, concern?

When the client is YOU? What’s happening in the field: Competitive audit

“Inspiration”: look at ideas and designs

“What problem are we trying to solve”: what are our goals?

If it’s about reading, don’t use wide grid

“Design from the Content Out”

Starrt with the basic grid: don’t be scared if it looks ugly at first

Tips for non-designers: limit number of colors, type styles, type sizes, and use a simple layout

“What about NAV?”

Footer says “there’s more” (make it more useful, promotional) – see Zeldman’s examples of modular, promotional footer

Do some beta testing of basic design

The Business Site

Example: communicate “value”

Start with the Content (persuasive content)

Focus on cities, locations as visual anchor... Focus on speakers, speaking…

“Curated Web 2.0”

Connect speakers & sessions visually

Use some user-generated stuff

– It costs more to change design late rather than early

* Zeldman’s PPT Fonts: Jubilat, Freight Sans

Jason Santa Maria: “Thinking Small”

Anecdote about “choose your adventure” books when he was a kid

“Decisions, decisions”: lots of small decisions add up

Seven Things (that are helpful over a process): 1. Be a thinker  Hold your horses (think about problem first)  Pretty Sketchy (keep a sketchbook, start simple; it’s not about being a good artist, it’s about being a good thinker)  Let’s get acquainted (get familiar with content, text, words)  Know your process, know your tools (don’t jump onto the computer too soon; let it be a tool of refinement)

2. Find the Message  Know what you’re trying to say with the design  Let design represent the theme/message

3. Be a (reverse) Engineer  Example of photoshop tennis  Approaches: o next/previous o zoom in/out o embellish or exaggerate o disarm o deconstruct o re-contextualize  “Yes. and…”

4. Plot it Out  “the grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.”  grid systems/models are helpful, but can be over-used  “The grid system is an aid, not a guarantee"  “it’s about choice”  uniform grids aren’t essential; asymmetrical can work as well  grids can be limiting or liberating, depending on how used

5. Think Horizontally, then Vertically  think about design in layers, like a “parfait”

6. Stop modulate and listen  making modular systems (see article)  flexible, adaptable  easy to explain and share with others (“it just makes sense”)  clients like modular css systems

7. Be a Matchmaker  Typography on the web is a challenge  There’s nothing wrong with Helvetica, but…  Try to find ways to use new typefaces via web  Drop-dead guide to not making ugly stuff with type o Don’t use two scripts o Don’t use two display typefaces o Don’t use two sans serif faces (with rare exceptions) o Rule of thumb: ONE OF EACH. Kinda. (the key is CONTRAST) o Pair fonts from the same designer o Find harmony in structure o Look for contrast (don’t be too close; find a lot of contrast between typefaces)

Q on design, color, etc: when in process…. JSM touches on that stuff early, part of thinking through the “mood”/“feel” of design… thinks about it in sketch mode

“Discovery” phase: research, inspiration, sketching, comparative research

Tips for developers trying to learn/understand design: check out JSM “reading” section on design

Think of design concepts, ideas first; worry about CSS later (don’t be limited by the shackles of css; start with the concept and idea, then figure out how to implement it)

“Content First” Kristina Halvorson

“content strategy and why I care so much”

@halvorson #contentstrategy #aea

Web writers often detached from process, brought in about 2/3 of the way into the process of a project

Lies we tell ourselves  we can figure it out late  we can re-use old content

Problem: we don’t need “copywriters” for the web: it’s content, not copy “Content is not a feature”: can’t be marginalized to a step in the process; most people overlook this, which is why most web content sucks

Late content is almost always the biggest reason for delay with web work

Slides will be text-heavy; but share them as you go

Content is: text, images, audio, video, infographics, widgets, etc.. (not just words)

Plan. Create. Deliver. Govern

NEVER use lorem ipsum. Use real text to mock up

Content should be useful, usable, and enjoyable mint.com as example of content driven to user needs…

Process: (FEH.. for details see PDF)  audit o quantitative o develop content inventory o assess what you HAVE  analysis o create a project foundation . align on business objectives and user goals . identity success metrics . define risks and how to mitigate o research & analysis . brand & messaging . user research . competitor site audits . government or regulatory requirements . qualitative audit  plan o provides clarity o makes informed decisions o facilitates smart decision making o documents the action plan o troubleshoots implementation

Use page tables to mock up content use  objective of page  source material  maintenance

Editors love these page tables; helps tell them what they need to do, what they need to work on A paradigm shift: content has to be more central to process, not an afterthought

Hard work, challenge…. but it makes users happier:  Better user experience  Great brand consistency  New operational efficiencies  Better risk management  Improved SEO and analytics  More effective personalization & targeting

Bringing in web writers late is a flawed strategy; it has to be a major, integrated process

Dan Brown: “Concept Models: A Tool for Planning Websites”

Comic Book Store anecdote/example: information on cover as a design model

CNN: examples of IA in action

Basic questions: where am I… where can I go…

Netflix: example of “moving target” design – customized categories, based on preferences; granular categories, i.e. comedies with a strong female lead

Content types:  Genre  Format  Function

Content types as playing pieces, governed by rules

Evolving world of navigation  Conventional navigation  Contextual, anticipatory navigation  Traditional static site maps are increasingly obsolete

Concept Models are diagrams that describe complex ideas

How they help: Making Decisions

Building concept models:  start with a list of concepts, themes (?)

WTF?? How is this useful?

“from concept model to site model”

Look for concepts that are destinations, hubs, starting points

Look for concepts that bridges other concepts, are less-weighty desinations

Look for relations that imply ownership or belonging

Eight tips: 1. determine context 2. do research 3. make a list 4. start with less 5. ….. or start with more (?) 6. label everything 7. balance familiar and unfamiliar 8. involve others

How know when done? Deadlines help. AS designers, we’re prone to endless iterations, obsessed with imperfections

"The curse of being a designer is you are perpetually unsatisfied with your work."

Whitney Hess: DIY UX: Give Your Users an Upgrade (Without Calling In a Pro)

We are all user experience designers. It’s not a specialty. Embrace it.

Iridesco example.

 Design research  Web analytics  Usability testing  Experimentation & iteration Design research: what do our users actually NEED?

 Iridesco takes feedback & aggregate to fuel innovation and improvements of their tools  Also uses user surveys (another avenue for communication)  “we don’t want to patch; we want to address the core problem”  give people the chance to talk about themselves and they will talk all day (about workflow)

Design research keys:  Make it easy for customers to reach you  Log their requests & use them to prioritize new features  Dig deeper to discover the underlying problems  Keep in touch

Web Analytics: what are our users actually DOING?

What users do and what the say they do aren’t always the same…

Cool tools: – Crazy egg – Google Website Optimizer (try multiple design options, buttons, colors

Keys to studying analytics:  Understand traffic cycles  Uncover usage patterns  Test design variations  Explore search logs to see what people are looking for 

Usability testing: How well dos our stuff ACTUALLY WORK?

Usability Testing light works well

Show a build, prototype, comp, sketch Doesn’t tell participant what she’s supposed to be doing asks “what are your general feelings about this”?

“‘It looks good’ is the worst feedback we can get” – iridesco

“You have t have humility and listen. Users aren’t always right, but you need to hear them.” – Iridesco

Get people who will tell you you’re wrong and what doesn’t work; don’t get “supportive” people who won’t be honest

– HR people are great – Receptionists are great – Twitter followers are useful – Starbucks – Craigslist

Hess likes old fashioned notepad, pen to record responses…

Cheap tools:  silverback  morae  windows media encoder  quicktime X (with snow leopard)

What about online testing? "Don't be a wimp. Be in the room with the test subject. Feel the pain."

Lots of drawbacks: don’t SEE feedback, can’t follow up, harder to internalize findings, and finally, it’s cowardly (feel the embarrassment of a sucky design)

Online testing tools (if you insist)  open hallway  five second test  usabilla

Experimentation & Iteration  Sketch  Photoshop  Test  Static HTML prototype  Test again  Working prototype  Test again  Tweak  Launch quietly  Get feedback  Tweak (and then back to feedback)

Roz Duffy (example, works on Comcast team) "We aren't always working on interesting stuff, but we always want to work smarter."

 Never stop improving your product  Make your working environment a creative one  Encourage everyone on the team to solve problems together  Soak up inspiration from everywhere

IMPORTANT STUFF TO TAKE AWAY (and make users happy):  Always be listening  Ask questions to get to underlying problems  Use data and anecdotes to inform the design  Test your designs and have the humility to admit you’re wrong  Complete the feedback loop  Never stop trying to make things better

Andy Clarke: “Walls Come Tumbling Down”

“My little pony” factory work as a young man taught him a lot about web design

Creativity is the essential ingredient

 Designing better workflows  Designing in the browser  Living with constraints  Designing systems, not site

Paradigm shift is coming: old methods shifting for more steamlined, creative web design

Content – > Design in the browser –> Testing

Design in a browser

“Content out” approach (not design first, content second)

Work in sprints, short bursts… fiddle live with clients to allow them to be involved

“New Internationalist” redesign process

 All browser markup design models; NO photoshop  Static visuals fail by definition o We’re designing web pages, not a photo of a page (don’t demo something that isn’t real) o Photoshop comps create unrealistic, inflexible expectations for design on live site o Can’t reproduce liquid, resizing, hover effects by users o Screws up sense of scale o Requires a lot of explanation o Leaves out lots of time-consuming details (how to handle overflows, wraps, content variations) o Pushes problems down the road to be handled later, closer to deadlines  CSS/Markup design gives an interactive, live, “tactile” model for users to try  It’s time to stop showing clients static design visuals

Do web sites need to look the same in every browser? No. They don’t need to look the same in every browser. But different does not mean broken.

Differences that look good, but other’s might not notice are missing aren’t a problem; who’s going to notice the aesthetic differences? (ie border radius, shadows, css3 elements)

Side rant: "It's only web geeks that know that more than one browser exists"

Browser differences not a problem, especially if the differences aren’t essential; don’t go mad trying to unify it all across the board: “learn to live with it”

“Support” or “Work” with browsers isn’t binary; it’s a sliding scale

Universal IE6 design CSS: an option to simplify & clean up IE6 to minimalist presentation?

How to Design in the Browser

 Sketch & build look and feel gradually  Don’t shoot for perfection: work in bursts  Start with “great package” (base html elements, css)  import CSS; add a “scratch.css” to the end of the stack modernizr.js onload.js belated.js

Use version control with daily folder of HTML, CSS files (DIY)

Test & design within clear grid that makes switches, swapping easy

“It’s our time, not theirs” We’re being paid not for our time, but for our knowledge and experience brought to the job

Other things to do with time saved:  professional development  build business  learn skills  do some pro bono work Change how we work for the better: do things more creatively, efficiently