Polecenia w Metro 2/3

W tym poście opiszę jak powinno wyglądać ułożenie poleceń na AppBar. Na początku chcę przypomnieć o charms bar jest to wysuwany z prawej strony parek. Wspominam o nim ponieważ operacje jak szukanie, udostępnianie, ustawienia czy też komunikacja pomiędzy urządzeniami powinny znaleźć się właśnie w charms bar unikniemy w ten sposób duplikowania funkcji.

Pasek aplikacji czyli kontrolka AppBar służy do przechowywania akcji jakie w danym miejscu aplikacji może wykonać użytkownik. Jednak istnieje kilka zasad którymi trzeba się kierować dodając akcje do paska. Trzymając się tych zasad nasze aplikacje będą wpisywać się bardzo dobrze w styl metro ale również ergonomia użytkowania będzie znacznie większa. Dodatkowo użytkownik będzie miał miłe doznania ponieważ przechodząc pomiędzy aplikacjami znajdzie szukane opcje szybciej.

Pierwszym krokiem jaki musimy zrobić to wypisać sobie wszystkie polecenia jakie występują w aplikacji. Poniżej prezentuję przykładowe akcje.

Mając wypisane akcje trzeba odpowiedzieć sobie na trzy ważne i podstawowe pytania.

• Które polecenia powinny pojawiać się w całej aplikacji?
• Które polecenia powinny pokazywać się na określonych stronach?
• Które polecenia powinny zostać przeniesione do charms oraz ustawień?

Po zastanowieniu się nad powyższymi pytaniami kolejnym krokiem jest pogrupowanie poleceń. Przy grupowania odpowiadamy sobie na takie pytania.

• Które komendy są funkcjonalnie powiązane?
• Które polecenia przełączają typy widoków?
• Które polecenia powinny pojawić się po zaznaczeniu elementu?

Akcje które znajdują się wyżej można pogrupować w ten sposób.

Polecenia widoku

Polecenia filtrowania

Polecenia sortowania

Polecenia wyboru

Polecenia wyboru

Polecenie Nowy element

Kolejnym krokiem jest rozważenie czy zestawy komend będzie lepiej działał w formie menu komend:

• Czy pasek aplikacji nie jest zbyt zatłoczony, czy nie ma tam zbyt wielu poleceń, czy będą do siebie pasowały?
• Czy istnieje zbiór, który korzysta z dłuższych etykiet lub interaktywnej kontrolki?

Dzięki menu można pokazać więcej opcji na mniejszej pozycji używając interaktywnych kontrolek.

W prezentowanym prze zemnie przykładzie można połączyć polecenia sortowania jak i filtrowania w jedno. Efektem tej operacji jest większa przejrzystość paska jak również zwiększona ergonomia pracy.

Ostatnim elementem jaki poruszę to sposób umieszczania poleceń na pasku. Ponieważ jest parę zasad które określają jak układać polecenia na pasku. Przy projektowaniu wyglądu paska powinniśmy kierować się trzema zasadami.

• Przewidywalność: W miarę możliwości należy użyć spójnej interakcji oraz umieścić polecenia we wszystkich widokach.
• Ergonomia: Zastanów się, w jaki sposób rozmieszczenie poszczególnych poleceń może poprawić szybkość i łatwość ich wykorzystania.
• Estetyka: Ogranicz liczbę poleceń. Wybierz ikony, które są łatwe do zrozumienia i przewidzenia. Stosuj krótkie etykiety.

Po prawej stronie paska umieszczamy polecenia które przewijają się przez cały system (domyślne polecenia). W przypadku jak mamy zaledwie kilka komend możemy wszystkie przypiąć do prawej krawędzi paska aplikacji.

Jednak jeśli poleceń jest więcej do rozgrupowujemy je do lewej i prawej krawędzi. Uzyskamy dzięki temu łatwiejsze korzystanie z paska.

Komendy które nie są potrzebne w niektórych momentach powinny być ukryte natomiast pokazywane tylko wtedy gdy faktycznie jest możliwość ich użycia.

Polecenia które pokazują się jako rezultat akcji użytkownika (np. zaznaczenie). Są przesuwane skrajnie do lewej krawędzi prowadzi to do łatwiejszego wyboru tych opcji.

Niektóre polecenia występują w większości aplikacjach i dla zachowania spójności pomiędzy nimi należy stosować się do poniższych zasad.

Polecenia wyboru, związane z dokonaniem wyboru, zawsze pojawiają się skrajnie na lewo. Kiedy są kontekstowe, pojawiają się przy danej sekcji.

W tym przykładzie, zanim użytkownik coś zaznaczy, polecenie select all pojawi się po lewej. Po zaznaczeniu czegoś przez użytkownika pozostałe polecenia pojawiają się po lewej stronie.

Polecenie Nowy element pojawia się po prawej stronie. Dzięki temu polecenie Nowy(New) staje się łatwo dostępne dla użytkownika.
Polecenie Nowe nie powinno pojawiać się w innym miejscu.

Polecenie Usuń/Nowy powinno być zawsze usytuowane w przedstawionej na rysunku kolejności.

Polecenie Usuń/Dodaj powinno być zawsze usytuowane w zaprezentowanej na rysunku kolejności.

Jasne polecenia – użyj etykiety, aby polecenie było czytelne, szczególnie dla operacji destrukcyjnych.

Single Post Navigation

← Older Entry

Newer Entry →