Upload
anna-liszewska
View
741
Download
0
Embed Size (px)
DESCRIPTION
Jak zaprojektować użyteczną aplikację/stronę mobilnąBest Practices dla dobrego mobile experience
Citation preview
Co to jest mobile experience?
Rok 2012 został okrzyknięty rokiem mobile.Ale… to my – branża – tak go nazwaliśmy! Nie nasi klienci, ani nie dalsi użytkownicy.
Też znamy te wszystkie statystyki ;)Ale nie one są najważniejsze…
Skupmy się na użytkownikach!Mobile experience może byd takie jak tu. A przecież…
Użytkownikjestnajważniejszy!
Najczęściej popełniane błędy projektantów
1. Wykorzystanie w aplikacjach na Android wzorów nawigacji i interakcji z platformy iOS.
2. Brak spójności w nawigacji.
3. Brak pomocy i wsparcia użytkownika podczas wykonywania zadao.
4. Mało precyzyjny język komunikatów i informacji zwrotnych.
5. Layout i grafika niedostosowana do kontekstu mobile.
Wyniki pewnego raportu…
Na Androida projektuje się inaczej niż na iOS…
≠
Aplikacja iGetin - iOS vs. Anroid
Aplikacja Citi Mobile - iOS vs. Anroid
Język komunikatów i informacji zwrotnych powinien byd jasny i precyzyjny
aplikacja Banku Millennium
Uwaga na zbyt długie komunikaty
aplikacja Banku Millennium
Kiedy layout nie jest dostosowany do kontekstu mobile…
aplikacja Alior Bank
Strona mobilna vs. aplikacja mobilna?
PlasticMobile.com
MobileAgency.nl
www.antyweb.pl
www.reserved.com/pl
SmashingMagazine.com, źródło: http://www.awwwards.com/50-examples-of-responsive-web-design.html
Ale… niezależna strona mobilna może byd niepotrzebna!
StephenCaver.com, źródło: www.desingmodo.com
Niezależna strona mobilna może byd niepotrzebna!
ForefathersGroup.com, źródło: www.desingmodo.com
Niezależna strona mobilna może byd niepotrzebna!
Ograniczenia wynikające z technologii mobilnych
• mały ekran = mniej miejsca
• internet mobilny = wolny transfer danych
• kontekst użycia
• miejsce -> wszędzie
• czas -> szybko
• niepełna uwaga = jednym okiem i jednym palcem
Ograniczenia
Wykorzystanie możliwości, które daje mobile
Zarówno rozwiązania na PC, jak i na urządzenia mobilne mogą zaspokajad potrzeby użytkownika, ale robią to w zupełnie odmienny sposób.
O wykorzystanie proszą się:
• aparat, kamera, speaker...
• czujnik światła
• akcelerometr
• NFC
• ...
Zaoferuj „więcej” albo „inaczej”
aplikacja Nearest Tube aplikacja The Milky Way
Best practices, jak projektowad na mobile
Produkt należy dostosowad do sposobu, w jaki będzie używany
strona mobilna m.ITAKA.pl
…dlaczego to takie ważne?
aplikacja Alior Bank
Źródło: „Mobile First”, Luke Wróblewski
Dużo wiemy o tym, jak użytkownicy korzystają z aplikacji…
…wykorzystajmy tę wiedzę!
aplikacja Endomondo Aplikacja Wezwij Taxi
Ułatwiajmy użytkownikom!
strona mobilna m.ITAKA.pl
Mała ilośd opcji – podstawowe funkcje są najistotniejsze
aplikacja Booking.com
Mała ilośd opcji – podstawowe funkcje są najistotniejsze
aplikacja Listonic aplikacja YouTube
Najważniejsza jest treśd (content is the king)
aplikacja Wyborcza
Aplikacja powinna wspierad działania użytkownika…
Strona mobilna JakDojade.com
…aby użytkownicy mogli się skupid na podstawowym zadaniu
aplikacja iBankomaty
Jak wyróżnid najważniejsze elementy
aplikacja Evernote
Dodatkowe funkcje warto umieścid kontekstowo
aplikacja Chilli ZET
Trudne zadania należy podzielid na etapy
Realizacja przelewu w aplikacji PEKAO SA
Aplikacje mobilne projektuje się inaczej niż strony mobilne
aplikacja mBank strona mobilna mBank
„Zachowaj zgodnośd pomiędzy systemem a rzeczywistością”
Kontakty / iPad
Tam, gdzie to możliwe, warto naśladowad rzeczywistośd
aplikacja iBooks
Na koniec najważniejsze – zgodnośd z wytycznymi!
Mobile First
Źródło: „Mobile First”, Luke Wróblewski
The simple guideline is whatever you are doing – do mobile first.
Get into mobile first and then web second. It’s teaching us a lot about how to design back to the desktop.
A shift to think about mobile first is biggerthan we saw with the personal computingrevolution.
Eric Schmidt, Google Chairman
Kate Aronowitz, Facebook’s Director pf Design
Kevin Lynch, Adobe’s CTO
DZIĘKUJEMY!
Gdybyście chcieli korespondowad:
[email protected]@janmedia.com
Gdybyście chcieli poczytad:
http://jestem.mobihttp://webusability.pl