Learn from the Past, Enhance for the Future Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson EnhanceConf 4 March 2016 London, UK
Slide 1
Slide 2
JAMHAM “I’ve been trying to make my site … work fully without JavaScript, however, I’ve found myself in situations where I can’t honestly think how I would do some features without it.”
Slide 3
Slide 4
The challenges we face building web products today are not new challenges.
Slide 5
(I’m looking at you, every hotel ever.)
Slide 6
DOUGLAS CROCKFORD “The Web is the most hostile software engineering environment imaginable.”
Slide 7
I A “Headless” UI
Slide 8
Slide 9
Hello. Howdy.
Slide 10
GUI
Slide 11
II Interface is a Conversation
Slide 12
West of House You are standing in an open field west of a white house, with a boarded front door. There is a small mailbox here. > open mailbox
Slide 13
This is a small room with passages to the east and south and a forbidding hole leading west. Bloodstains and deep scratches (perhaps made by an axe) mar the walls. A nasty-looking troll, brandishing a bloody axe, blocks all passages out of the room. Your sword has begun to glow very brightly. > kill troll
Slide 14
This is a small room with passages to the east and south and a forbidding hole leading west. Bloodstains and deep scratches (perhaps made by an axe) mar the walls. A nasty-looking troll, brandishing a bloody axe, blocks all passages out of the room. Your sword has begun to glow very brightly. > hit the troll with the Elvish sword
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo
Slide 21
How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo it’s embarrassing ◉ Other
Slide 22
Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
Slide 23
DUSTIN DIAZ It will be a test case to see how usable your website is to others without a “design”.
Slide 24
I really want to be your friend. I <em>really</em> want to be your friend. I really want to be your friend. I <i class=“sarcasm”>really</i> want to be your friend.
Slide 25
Document Outline
Slide 26
Write for People
Slide 27
๏ Be clear. ๏ Be concise. ๏ Be honest. ๏ Be considerate. ๏ Write how you speak.
Slide 28
Avoid Technical and Legal Jargon
Slide 29
Slide 30
Slide 31
When Requesting Feedback, Make It Clear That the User Needs to Respond
Slide 32
<label for=“first_name”>What’s your first name?</label> <input name=“first_name” id=“first_name”>
Slide 33
<label for=“first_name”>What’s your first name?</label> <input name=“first_name” id=“first_name” aria-describedby=“first_name-error”> <em id=“first_name-error”> Without your first name, I won’t know how to address you. Could you please provide it? </em>
Slide 34
When Asking a User to Choose, Clearly Present the Options
Slide 35
<input type=“radio” name=“agree” id=“agree_yes” value=“yes”> <label for=“agree_yes”>Yes</label>
Slide 36
<fieldset> <legend tabindex=“0”>Do you agree to the terms of service for this site?</legend> <input type=“radio” name=“agree” id=“agree_yes” value=“yes”> <label for=“agree_yes”>Yes</label> <input type=“radio” name=“agree” id=“agree_no” value=“no”> <label for=“agree_no”>No</label> </fieldset>
Slide 37
<nav id=”nav” tabindex=“0” aria-labelledby=”nav-title”> <h1 id=”nav-title” class=”hidden”>Here’s what you can find on this site:</h1> <ul> <li><a href=”/about/”><b class=”hidden”>A Bit </b>About<b class=”hidden”> Me</b></a></li> <li><a href=”/notebook/”><b class=”hidden”>Entries in My </b>Notebook</a></li> … </ul> </nav>
Slide 38
Prompts Should be Short, While Still Being Clear
Slide 39
ALBERT EINSTEIN It can scarcely be denied that the supreme goal of all theory is to make the irreducible basic elements as simple and as few as possible without having to surrender the adequate representation of a single datum of experience.
Slide 40
ALBERT EINSTEIN (VIA ROBERT SESSIONS) Everything should be as simple as it can be but not simpler.
Slide 41
THIS IS REAL COPY Heavy rains throughout most of the State have given an optimistic outlook for lessened fire danger for the rest of the season. However, an abundance of lightning maintains a certain amount of hazard in isolated areas that have not received an excessive amount of rain.
Slide 42
IT COULD BE SO MUCH BETTER Heavy rains throughout most of the State have lessened fire danger for the rest of the season. However, lightning threatens isolated dry areas.
Slide 43
Slide 44
Slide 45
Ask Only Necessary Questions
Slide 46
Slide 47
Slide 48
Phone Number:
Slide 49
Present Information in Consumable Pieces
Slide 50
The top seller in the garden department is Repel Lemon Eucalyptus Natural Insect Repellent, 4-Ounce Pump Spray Would you like to hear the rest?
Slide 51
III Future Enhancements
Slide 52
<meta name=“msapplication-cortanavcd” content=”http://myapp.io/vcd.xml”>
Slide 53
<?xml version=”1.0” encoding=”utf-8”?> <VoiceCommands xmlns=”http://schemas.microsoft.com/voicecommands/1.2”> <CommandSet xml:lang=”en-us” Name=”groupPost”> <CommandPrefix>Group Post</CommandPrefix> <Example>Group Post add note</Example> <Command Name=”addNote”> <Example>add a note {message} using group post</Example> <ListenFor RequireAppName=”BeforeOrAfterPhrase”>[please] add a note [that] {noteSubject}</ListenFor> <Feedback>adding {noteSubject} to Group Post</Feedback> <Navigate Target=”/addNote.htm”/> </Command> <PhraseTopic Label=”noteSubject” Scenario=”Dictation”></PhraseTopic> </CommandSet> </VoiceCommands>
Slide 54
Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson
