Strona główna » Projektowanie interakcji

Projektowanie aplikacji webowych dla początkujących

12 lipca 2011 napisała Ewa [ Brak odpowiedzi ] Drukuj wpis

Aplikacje webowe to, najogólniej rzecz ujmując, oprogramowanie, z którego możemy korzystać przez Internet. Służą użytkownikowi m. in. do tworzenia treści, współpracy z innymi czy realizowania konkretnych zadań – a wszystko w obrębie znajomego okna przeglądarki. Wraz z rozwojem Sieci, coraz więcej programów i usług udostępniane jest w tej formie – Google Docs, Balsamiq, GrooveShark, Notable, MailChimp, ZooTool, czy polski Kontomierz, to tylko kilka przykładów aplikacji, z których korzystam regularnie.

Czym aplikacje różnią się od stron www

Po pierwsze, aplikacja jest samowystarczalna w odróżnieniu od stron internetowych, które projektowane są tak, aby zachęcać do ich przeglądania i surfowania między nimi, przy stosunkowo ograniczonej liczbie skomplikowanych funkcjonalności. Projektowanie aplikacji kładzie szczególny nacisk na interaktywność interfejsu, zaawansowane funkcjonalności i integrację z dostępnymi technologiami webowymi. Generalnie:

  • Strony internetowe zorientowane są w większym stopniu na dostarczanie informacji.
  • Aplikacje webowe stanowią przede wszystkim narzędzie realizacji konkretnych zadań służących określonemu celowi.

Oczywiście to rozróżnienie nie jest jednoznaczne i sztywne, raczej wyznacza ono krańce pewnego kontinuum. Strony internetowe nierzadko też posiadają bardziej rozbudowane funkcjonalności niż wyświetlanie treści, np. w przypadku e-commerce. To, co jednak jest istotne to fakt, iż w aplikacjach główny nacisk położony jest na interakcję, pracę z danymi oraz sprawną realizację celów, bardziej niż na przykuwanie uwagi.

6 zasad projektowania aplikacji webowych

  • Umożliwiaj bezpośrednią interakcję z aplikacją

Jeśli użytkownik może edytować pewne elementy, należy pozwolić mu na to w ich obrębie, bez przenoszenia go do osobnej strony. Prezentacja i edycja obiektu powinny się odbywać w jednym miejscu (np. poprzez drag & drop). Dzięki temu skracamy czas potrzebny na wykonanie tej czynności.

Przenoszenie elementów do katalogów za pomocą funkcji drag & drop na przykładzie ZooTool.com

Przenoszenie elementów do katalogów za pomocą funkcji drag & drop na przykładzie ZooTool.com

Edytowanie treści w miejscu: podwójne kliknięcie pozwala modyfikować tekst i zmieniać atrybuty danego zadania - przykład Wrike.com

Edytowanie treści w miejscu: podwójne kliknięcie pozwala modyfikować tekst i zmieniać atrybuty danego zadania - przykład Wrike.com

  • Minimalizuj wysiłek potrzebny do jej obsługi

Nie należy wymagać, aby użytkownik uczył się, domyślał i pamiętał, jak obsługiwać dany interfejs. W zamian powinien on dostarczać mu kontekstowe wskazówki, dzięki którym w każdym momencie korzystania z aplikacji będzie wiedział, co zrobić. W szczególności dotyczy to udostępniania narzędzi w zależności od kontekstu. Np. narzędzia do edycji tekstu powinny być udostępnione użytkownikowi w momencie i w miejscu, w którym edytuje dany element.

Dodatkowe opcje dostępne są dopiero po wybraniu zadania z listy - RemeberTheMilk.com

Dodatkowe opcje dostępne są dopiero po wybraniu zadania z listy - RemeberTheMilk.com

  • Utrzymuj użytkownika w obrębie strony

Przechodzenie od strony do strony czy przeładowywanie jej treści zaburza swobodne korzystanie z aplikacji. Zamiast tego lepiej wykorzystać sposoby prezentacji zawartości w obrębie strony, takie jak np. modale, doczytywanie treści wraz z postępem przewijania strony czy dynamiczne wyświetlanie treści.

Facebook pozwala na doczytywanie starszych postów, lajkowanie oraz komentowanie ich w obrębie jednego widoku.

Facebook pozwala na doczytywanie starszych postów, lajkowanie oraz komentowanie ich w obrębie jednego widoku.

  • Pomagaj użytkownikowi odkrywać funkcjonalności

Jednym z podstawowych wyzwań w projektowaniu aplikacji jest kwestia przekazania użytkownikom wiedzy o dostępnych funkcjonalnościach, nauczenia ich i zachęcenia do ich wykorzystywania. Użytkownik nie będzie korzystał z funkcji, o której istnieniu nie ma pojęcia. O sposobach wprowadzania użytkowników w nowe funkcje pisała ostatnio Iga w artykule Czysta karta, czyli jak wspierać nowicjuszy. Ta zasada dotyczy dostarczania użytkownikom informacji jeszcze przed interakcją.

Grooveshark już na stronie głównej wyjaśnia, jak z niego korzystać.

Grooveshark już na stronie głównej wyjaśnia, jak z niego korzystać.

  • Wykorzystuj efekty przejścia (rozsądnie)

W aplikacjach szeroko wykorzystywane są efekty przejścia, takie jak rozjaśnianie i przyciemnianie, rozwijanie i zwijanie, podświetlanie czy inne animacje. Służą one prezentacji informacji zwrotnej podczas trwania interakcji. Nawet niewielki ruch znakomicie przyciąga uwagę użytkownika. I właśnie dlatego stosowanie tych rozwiązań powinno być przemyślane i uargumentowane, aby faktycznie użytkownikowi pomagać, a nie przeszkadzać.

Efekt przyciemnienia tła - Picnic.com

Efekt przyciemnienia tła - Picnic.com

Instapaper pokazuje okienko zapisu artykułu do późniejszego przeczytania i znika zaraz po zakończeniu zapisu.

Instapaper pokazuje okienko zapisu artykułu do późniejszego przeczytania i znika zaraz po zakończeniu zapisu.

  • Reaguj na działania użytkownika w czasie rzeczywistym

Aplikacja powinna szybko reagować na to, co robi użytkownik i wychodzić mu naprzeciw – czyli dostarczać mu informacji zwrotnej także po interakcji. Ten feedback powinien być odpowiedni oraz szybki. Przykładem jest autouzupełnianie, podgląd zmian w czasie rzeczywistym czy pasek postępu.

Gmail wyświetla komunikaty u góry.

Gmail wyświetla komunikaty u góry.

Podpowiadanie wyszukiwanych fraz w odpowiedzi na wpisywaną przez użytkownika treść.

Podpowiadanie wyszukiwanych fraz w odpowiedzi na wpisywaną przez użytkownika treść.

Picnic umożliwia podgląd efektów edycji obrazka w czasie rzeczywistym.

Picnic umożliwia podgląd efektów edycji obrazka w czasie rzeczywistym.

Jak stosować powyższe zasady w praktyce?

Odpowiedź, wraz z ogromem ilustracji, odnajdziesz w książce Designing Web Applications autorstwa Billa Scotta i Theresy Neil. Zbiera ona kilkadziesiąt wzorców projektowych wspomagających realizację głównych zasad projektowania dla aplikacji, bogato ilustrowanych przykładami.

Ich omówienie znajdziecie także w webcaście O’Reilly:
(uwaga: trwa on prawie półtorej godziny)

oraz – jeśli ktoś woli – w samej prezentacji

Autorka

Ewa Sobula

www: http://www.linkedin.com/pub/ewa-sobula/30/407/694
UX designer w Sabre Airline Solutions. Umiejętności badawcze i analityczne rozwijała na socjologii, by lepiej rozumieć użytkowników. Równolegle uczyła się tworzenia serwisów internetowych, by poznać technologiczne możliwości i ograniczenia. Teraz z przyjemnością łączy te kompetencje projektując i badając serwisy. Czytaj więcej
Tagi: ,