Nya tekniker och användbarhet PER AXBOM, XLENT 0708 – 77 80 08 Användbarhet som skapar användarnytta...

Internet 1995-2010 Entusiaster Publicister Användare Internet överallt 1995 2000 2005 2010 © 2006 Per Axbom

Paradigmskiftet Production . Distribution . Consumption

Webbstrategi User Experience Business Tools frustration olönsamhet in- efficiency Long-term plans and goals. Determine business requirements. Navigate through business politics. Understand users, competition, partners, stakeholders. The people. All tools and techniques; strengths, weaknesses, limitations and costs.

Vad vill vi? förbättra användarupplevelser öka användbarheten göra människor mer produktiva hjälpa användare att känna sig som superhjältar

förbättra användarupplevelser

öka användbarheten

göra människor mer produktiva

hjälpa användare att känna sig som superhjältar

Men vi vill inte... minska tillgängligheten förvirra användaren minska sökbarheten tappa sammanhanget K

minska tillgängligheten

förvirra användaren

minska sökbarheten

tappa sammanhanget

RIA – den förbjudna frukten klient/server balans asynkron kommunikation nätverkseffektiv körs i webbläsaren rikare mer responsiv Ajax Flash Silverlight

klient/server balans

asynkron kommunikation

nätverkseffektiv

körs i webbläsaren

rikare

mer responsiv

Men hur ser det ut?

Ajax Stora flikar Dra-och-släpp Auto-complete Kartor WYSIWYG Förhandsgranskningar

Stora flikar

Dra-och-släpp

Auto-complete

Kartor

WYSIWYG

Förhandsgranskningar

http://www.axbom.se/ajax-form/kontakt.html

Mashups

RIA – klurigheter JavaScript processorberoende (ej Flash) skriptnedladdning öppenhet sökmotorsynlighet internetåtkomst

JavaScript

processorberoende (ej Flash)

skriptnedladdning

öppenhet

sökmotorsynlighet

internetåtkomst

RIA – styrning och mätning frihet / komplexitet inte längre webbsidor, hur mäta var får användaren problem responstid svårmätbar

frihet / komplexitet

inte längre webbsidor, hur mäta

var får användaren problem

responstid svårmätbar

DÃ¥liga exempel Ajax tabs content script Authorize.net Surewest dontclick.it

Ajax tabs content script

Authorize.net

Surewest

dontclick.it

Bra exempel iGoogle flickr wishlistr prisjakt ta-da list

iGoogle

flickr

wishlistr

prisjakt

ta-da list

Användardilemmat Användaren interagerar direkt med sidkomponenter (redigering, dra-och-släpp, panorering i karta, m.m.) Delar av sidan uppdateras (laddas inte om) Mer detaljerad information finns på samma sida (inte ny sida) Återkoppling, bekräftelser och felmeddelanden i sidan

Användaren interagerar direkt med sidkomponenter (redigering, dra-och-släpp, panorering i karta, m.m.)

Delar av sidan uppdateras (laddas inte om)

Mer detaljerad information finns på samma sida (inte ny sida)

Återkoppling, bekräftelser och felmeddelanden i sidan

RIA och behovet av frihet kräver ingen installation uppgraderingar är automatiska plattformsoberoende, datoroberoende virusfritt

kräver ingen installation

uppgraderingar är automatiska

plattformsoberoende, datoroberoende

virusfritt

Dold JavaScript – den soliga baksidan Separerar JavaScript från struktur/innehåll och presentation Undviker problemen med traditionell JavaScript-programmering (utnyttjar färdiga JS-bibliotek) Snygg degradering i webbläsare som inte kan tolka beteenden på önskat sätt

Separerar JavaScript från struktur/innehåll och presentation

Undviker problemen med traditionell JavaScript-programmering (utnyttjar färdiga JS-bibliotek)

Snygg degradering i webbläsare som inte kan tolka beteenden på önskat sätt

Att tänka på Tillgänglighet (för människor med funktionshinder) Tillgänglighet (datorrelaterat) Tillgänglighet (sökmotorer) Mobiler Felhantering Val av teknik

Tillgänglighet (för människor med funktionshinder)

Tillgänglighet (datorrelaterat)

Tillgänglighet (sökmotorer)

Mobiler

Felhantering

Val av teknik

RIA - rika applikationer har många ränder JavaScript Ajax, ramverk Curl Adobe Flash/Flex Silverlight Java applets/applikationer

JavaScript

Ajax, ramverk

Curl

Adobe Flash/Flex

Silverlight

Java applets/applikationer

Teknikjämförelse plattformsoberoende dynamiskt tillgänglighet möjlig fallback-lösning billig kompetens kring tekniken Flash Ajax

plattformsoberoende

Använd Ajax (eller annan teknik) när... du kan automatisera valprocesser du kan minimera fel och/eller underlätta inmatning av information du kan presentera information snabbare användaren kan påverka informationen snabbare och på ett förenklat sätt

du kan automatisera valprocesser

du kan minimera fel och/eller underlätta inmatning av information

du kan presentera information snabbare

användaren kan påverka informationen snabbare och på ett förenklat sätt

Använd inte Ajax... för att bygga hela webbplatser (om du inte bygger en fristående applikation) för att skapa häftiga animationer/effekter som tar tid från användaren för att hämta information som du vill ska vara sökbar, eller som användare ska kunna lägga till i bokmärken när informationssäkerhet är viktigt om du inte har resurser för att hantera snabba förändringar om du inte samtidigt kan erbjuda en fallback-lösning

för att bygga hela webbplatser (om du inte bygger en fristående applikation)

för att skapa häftiga animationer/effekter som tar tid från användaren

för att hämta information som du vill ska vara sökbar, eller som användare ska kunna lägga till i bokmärken

när informationssäkerhet är viktigt

om du inte har resurser för att hantera snabba förändringar

om du inte samtidigt kan erbjuda en fallback-lösning

Designmönster För varje givet problem finns ett oändligt antal lösningar... Designmönster ger oss styrmedel för alla utvecklare och webbkreatörer kostnadseffektiv webbutveckling användarcentrerad webbutveckling.

För varje givet problem finns ett oändligt antal lösningar...

Designmönster ger oss

styrmedel för alla utvecklare och webbkreatörer

kostnadseffektiv webbutveckling

användarcentrerad webbutveckling.

Designmönsterbibliotek Problem Lösning (med bild) Använd när Hur Varför Fler exempel

Problem

Lösning (med bild)

Använd när

Hur

Varför

Fler exempel

Visuella mönster

Bra interaktiv design på webben är... Snabbrörlig Hänsynsfull Degraderingsbar Osynlig Anpassad Agil

Snabbrörlig

Hänsynsfull

Degraderingsbar

Osynlig

Anpassad

Agil

Men i slutändan är det användarna som styr...

With great power comes great responsibility usa

Copyright © 2005 by XLENT No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means - electronic, mechanical, photocopying, recording, or otherwise - without the permission of XLENT. This document provides an outline of a presentation and is incomplete without the accompanying oral commentary and discussion. Frågor på det? Per Axbom [email_address] 0708-77 80 08