I de tidiga dagarna med att designa webbplatser för mobila enheter bifogade de flesta utvecklare sitt produktutbud. De släppte en fullt fungerande stationär version och sedan en "mobiloptimerad" version som avlägsnade mycket av varumärket och bilderna för att rymma den begränsade kapaciteten och nätverkshastigheten för godis telefoner och 3G trådlösa nätverk.
Samtida smartphones kan dock göra webbsidor lika effektiva som stationära datorer, via nätverk lika bra eller bättre än gårdagens DSL-linjer.
Design konvergerar sedan tillbaka till ett användargränssnitt. Men risken för designers är inte att en smartphone eller en surfplatta inte kan göra en modern, mottaglig webbplats. Det är snarare att metoden för användarinmatning på en pekskärmsenhet kräver meningsfulla ändringar av den underliggande webbdesignen. Dagen att bygga en webbplats som antar besökare har ett tangentbord och en mus är över.
Grundläggande Touchscreen Design Regler
Att designa för ett pekskärmsmedvetet webbgränssnitt kräver en utveckling av det traditionella övervaknings-mus-tangentbordet. I synnerhet måste du ta emot interaktioner som gester, kranar och multitouch-inmatning.
- Tappning är inte korrekt.Om inte kunden har ett barns fingrar, kan det vara svårt att tappa och vara exakt med de mycket exakta mjukvaruinställningarna.
- Gester skiljer sig från kranar.För att rulla en långsida på en pekskärm, sveper användaren ett finger upp webbläsarfönstret. Det här kanske inte verkar betydande förrän du inser att du bläddrar med musen flyttar du musen ner .
- Två (och fler) fingertoppar.En användare kan använda flera fingertoppar på enheten samtidigt för att styra den. Dessa extra kranar kan innebära något specifikt beroende på operativsystem för användarens enhet.
- Högbländningsenheter.Skärmarna på de flesta pekskärmstabletter är gjorda av ett robust glas. Detta material kan vara mycket svårt att läsa igenom, med mycket bländning, i ljusa situationer. Plus, med all beröring får de fingeravtryck och fläckar på skärmen som kan påverka hur dina sidor ser ut.
- Skärmtangentbord.Medan vissa användare har ett trådlöst tangentbord som de ansluter till sina tabletter använder de flesta tabletanvändare tangentbordet på skärmen för datainmatning. OSK-inmatning kan resultera i några hilariska typsnitt samt att vara obehagligt att använda under längre perioder.
På grund av dessa egenskaper hos enheten bör webbdesigners betona flera grundläggande designregler för pekskärmsanvändare:
- Placera inte klickbara objekt för nära varandra.Det finns ingen hård och snabb regel som definierar hur nära är för nära, men listor med länkar, speciellt i en liten textstorlek, kan vara svåra att navigera genom att klicka (tappa) med en tjockfinger. Det kan vara irriterande att behöva zooma in för att försöka klicka på en länk. Denna princip gäller för knappar och länkar.
- Hierarkier kan vara svåra att hålla öppna.En populär form av dynamisk meny använder JavaScript för att öppna en undermeny när användaren klickar och sedan sveper musen över undermenyn. Dessa tillstånd kan vara mycket svåra eller omöjliga att använda på pekskärmar eftersom de antingen inte är öppna eller inte kommer att stängas.
- Flytta länkar och klickbara områden bort från fönstrets högra kant.De flesta människor har högra hand och tenderar att rulla på den sidan av skärmen. Eftersom rullning görs med en gest, är det ibland möjligt att starta svepningen på en länk av misstag. Användare kan bli irriterad om de vill rulla på sidan och i stället hamnade av misstag genom att knacka på en länk. Genom att flytta dina länkar bort från höger sida kan du hjälpa dem att undvika detta besvär.
- Det finns ingen mus.Och det betyder att det inte finns någon mus pekare . Du bör inte lita på att muspekaren ändras för att indikera att något är klickbart.
- Hover-tillstånd existerar inte.Som en följd till ovanstående, eftersom det inte finns någon mus, finns det inget att sväva med. En länk är antingen klickad (tappad) eller inte på en pekskärmsenhet, så användarna kan inte utgå från användbar information från sådana svävarstillstånd som färgändringar, verktygstips eller statusfältförändringar.
- Svarta bakgrunder förbättrar bländningen.En webbplats med en svart bakgrund kan vara mycket svår att läsa på en pekskärm på grund av bländningen. Svart gör fingeravtryck på enheterna tydligare och suddar skärmen. Och det svarta kan vända skärmen till en spegel som återspeglar användarnas ansikte ofta mer än texten på skärmen.
- Långa block av text i formulär är svåra att skriva.Medan det är möjligt att skriva hela romaner på en iPad eller en Android- eller Windows-surfplatta, tycker de flesta inte om att använda tangentbordet på skärmen för långa textsträckor. Ju mer din design kan göra datainmatning så kort och lätt som möjligt desto bättre.
Den viktigaste aspekten av att designa med touchscreens i åtanke är att testa dina sidor på en pekskärmsenhet. Medan massor av iPad- och Android-emulatorer finns tillgängliga och massor av Windows-tabletter, ger de fortfarande inte känslan av en pekskärm. Du kan inte säga att länkarna är för nära eller att knapparna är för små eller att bländningen gör sidan för svår att läsa - om du inte tar ut en tablett och provar dem innan du släpper ut din nya webbdesign.
