You are on page 1of 5


Lost in Translation
Quality Assurance


An Event Apart, Chicago
August 27-28, 2007 Derek

patterns/techniques from real sites
Accessibility as interplay between XHTML/CSS/JS
Checklist overarching strategy
User Experience

custom widgets custom widgets

• provide us with more intuitive
controls than what HTML allows

• requires code/design to emulate
native controls

• if we “fake it” so well that people
can’t tell the difference, is that good
or bad?

• what problems arise if we don’t
“fake it” well?
inline editing inline editing

• requires fewer page refreshes

• changing on the fly means we
maintain context and

• mechanism for activation can be
problematic: requires hovering

• what is the alternative?

inline editing live updates

live updates error/advisory information

• requires fewer page refreshes • each field has a label

• how do we indicate that the page is • some fields have additional
being updated? information - we need to associate
that with the field or it can/will be
• how do we alert the user that missed
there is new content, if they can’t
see it? • errors/advisory info needs to be
near the control to which it relates
• linearization is often an issue

• screen reader buffers are
problematic, but can be updated
error/advisory information error/advisory information

! <label for="uname">
! ! Username
! ! <em>must not contain spaces</em>
! </label>

! <input id="uname" ... />

form linearization form linearization

• often we translate visual layout and
effects into our code
• reconsider code to take into ! <label for="searchtxt">
account intent and design ! ! Search Terms:
! </label>
! <input id="searchtxt".../>
! <input type="submit" value="Search" />

<div class="group">
! <div>...</div>!! ! ! ! ! !

form linearization

1 3
! <label for="searchtxt">
! ! Search Terms:
2 ! </label>
! <input id="searchtxt".../>

! ! <div class="group">
! ! ! <div>...</div>!! ! ! ! ! !
! ! </div>

! <input id=”submitbtn” value="Search" />
search results
• results are often below the fold

• repetition of the form can confuse
people that have a limited view of 3
the page

• many different page elements
requires a mechanism to move
around the page

method='post' 2


translating visual language

• designers are smart

• they create rhythm, flow, balance,

• design communicates

• we need to translate the visual
language that the designer created
to something meaningful in code
What do colour and
position tell us?