W Intum są dwa menu, które widać cały czas. Jedno prowadzi do modułów: zadań, poczty, CRM, faktur. Drugie dotyczy samego użytkownika i firmy, w której pracuje: przełączanie kont, profil, ustawienia, wylogowanie. Pierwsze w aplikacjach na telefon jest już natywne. Teraz bierzemy się za drugie, bo z czasem zrobił się w nim bałagan.
Poniżej opisujemy, jak to wyglądało, jak podobne menu mają duże aplikacje i na co je zmieniamy.
Jak było do tej pory
Na komputerze kliknięcie logo w lewym górnym rogu otwiera menu z pozycjami: Pulpit, Fakturownia (jeśli firma z niej korzysta), Ustawienia, Mój profil, Wyloguj. Pod nimi jest lista kont z odnośnikiem „więcej…”, a na samym dole wybór języka i motywu (jasny albo ciemny).
Awatara w górnym pasku na komputerze nie było. Menu pod awatarem istniało w kodzie, ale było wyłączone, więc sprawy firmy i sprawy osobiste mieszały się w jednym menu pod logo. Wyloguj stało w środku, między profilem a listą kont, a na liście nie było widać, w którym koncie akurat jesteś.
W przeglądarce na telefonie nie ma miejsca na dwa menu na górze, więc menu spod logo trafiło na początek panelu bocznego, który otwiera się przyciskiem z trzema kreskami. Pasek na górze pokazuje wtedy tylko nazwę produktu.
Najbardziej zagmatwane jest to w aplikacjach na iPhone’a i Androida. Dotknięcie nazwy konta na górze ekranu otwiera natywny arkusz z listą kont, ustawieniami aplikacji i wylogowaniem. Ale w panelu bocznym strony dalej jest stare menu spod logo, z innym zestawem pozycji. Motyw i język zmienia się tylko w jednym, ustawienia aplikacji są tylko w drugim, a konta i wylogowanie w obu.
Co już się zmieniło w aplikacjach
Dolny pasek z przyciskami w aplikacjach jest natywny, czyli rysuje go sam telefon, a nie strona. Chowa się przy przewijaniu w dół i wraca przy przewijaniu w górę. Które przyciski są w pasku i w jakiej kolejności, każdy ustawia sobie w Ustawieniach, a zmiana działa od razu, bez aktualizacji aplikacji.
Doszło do tego natywne menu modułów pod przyciskiem z czterema kwadratami w nagłówku. Moduły są pogrupowane w kategorie jak na komputerze, po dotknięciu modułu widać jego sekcje, a na górze jest wyszukiwarka. Szuka bez względu na polskie znaki, więc „ksiegowosc” znajdzie „Księgowość”. Menu pokazuje tylko moduły włączone w firmie i sekcje, do których dana osoba ma dostęp, i samo się odświeża, gdy coś się w tym zmieni.
Zostało menu konta.
Jak to robią duże aplikacje
Na komputerze prawie wszyscy rozdzielają dwie rzeczy: menu firmy (czy zespołu) i menu osoby.
Notion i Slack mają nazwę firmy w lewym górnym rogu. Po kliknięciu pokazuje się przełączanie między firmami, ustawienia firmy i zaproszenia. W Slacku sprawy osobiste, takie jak profil, status czy preferencje, są pod awatarem. Linear trzyma wszystko w jednym menu pod nazwą firmy: ustawienia, zaproszenia i przełączanie firm, a wygląd i inne ustawienia osobiste są w preferencjach. GitHub i narzędzia Atlassiana robią podobnie, a Google ma pod awatarem w prawym górnym rogu listę kont, z której przełącza się jednym kliknięciem. Nigdzie nie ma dwóch menu z tymi samymi pozycjami.
Na telefonie spotyka się dwa podejścia. Google, Microsoft Teams, Notion i Slack przy zmianie firmy trzymają awatar albo nazwę firmy na górze ekranu i otwierają pod nim arkusz, który zajmuje większość ekranu. Facebook i Instagram mają zamiast tego ostatnią zakładkę w dolnym pasku („Menu” albo profil), a Slack ma tam zakładkę „Ty” z profilem i ustawieniami.
Systemy CRM i ERP robią to trochę inaczej. Ustawienia firmy mają pod osobną ikoną koła zębatego (Salesforce, HubSpot, Zoho CRM) albo jako osobną aplikację (Odoo), a nie w menu pod logo. W lewym górnym rogu Salesforce i Odoo mają siatkę aplikacji, a HubSpot logo prowadzące do strony głównej. Wszystko, co dotyczy osoby, łącznie z wylogowaniem, jest pod awatarem w prawym górnym rogu. Przełączanie kont zależy od systemu. W HubSpocie konta są w tym samym menu co profil. Odoo ma osobny przełącznik firm w górnym pasku. W Salesforce każda organizacja to osobne logowanie.
Poza tym wszystkie te aplikacje trzymają się kilku zasad:
- Zmiana konta zajmuje jedno dotknięcie. Kto ma dużo kont, dostaje wyszukiwarkę.
- Wylogowanie jest na samym dole, zwykle na czerwono, żeby nie trafić w nie przypadkiem.
- Ustawienia są rozdzielone: osobno ustawienia aplikacji na telefonie, osobno ustawienia firmy, osobno profil.
- Pulpitu nie ma w menu konta. Do strony głównej prowadzi logo albo pierwszy przycisk w dolnym pasku.
Na co zmieniamy
W aplikacjach na telefon
Zamiast dwóch menu będzie jeden natywny arkusz, otwierany tak jak dziś, przez dotknięcie nazwy konta na górze ekranu. Od góry:
- awatar, imię i nazwisko oraz e-mail, a po dotknięciu - Mój profil,
- lista kont z zaznaczonym bieżącym, z wyszukiwarką i przyciskiem „Pokaż wszystkie”, gdy kont jest więcej,
- ustawienia konta firmy (tylko dla osób, które mają do nich uprawnienia) i Fakturownia,
- wygląd (jasny, ciemny albo jak w systemie) i język,
- ustawienia aplikacji,
- a na końcu, oddzielone od reszty i na czerwono, Wyloguj.
Stare menu spod logo znika z panelu bocznego strony w aplikacji. Jeśli w panelu zostanie coś związanego z kontem, to otworzy właśnie ten arkusz. Pulpit zostaje tam, gdzie jest, czyli w dolnym pasku.
Pozycje w arkuszu przygotowuje serwer, tak samo jak menu modułów. Dzięki temu nowa pozycja albo zmiana nazwy pojawi się u wszystkich bez wydawania nowej wersji aplikacji, a osoba bez uprawnień do ustawień firmy po prostu ich nie zobaczy.
Motyw i język na początek mogą otwierać się jako zwykłe strony w aplikacji, tak jak dziś. Natywne przełączniki dodamy, gdy reszta arkusza będzie działać.
Zastanawialiśmy się nad osobną zakładką „Ty” w dolnym pasku, jak w Slacku. Na razie z niej rezygnujemy. Dolny pasek każdy układa pod siebie z modułów, z których korzysta najczęściej, i szkoda zabierać z niego miejsce na coś, co otwiera się rzadko i jest dostępne jednym dotknięciem na górze ekranu.
Na komputerze
Tu zmiana jest już gotowa i czeka na testy. Menu rozdzielamy tak, jak robią to Notion czy Linear:
Logo otwiera menu firmy: Pulpit, ustawienia konta (tylko dla osób, które mają do nich uprawnienia), Fakturownię i listę kont z zaznaczonym bieżącym.
Menu systemu (przycisk z czterema kwadratami w prawym górnym rogu) ma na dole pasek osoby: awatar, imię i e-mail, które prowadzą do Mojego profilu, a obok, na czerwono, Wyloguj. Pasek jest przyklejony do dołu menu, więc widać go bez przewijania listy modułów.
Najpierw planowaliśmy osobny awatar w górnym pasku, jak w Slacku czy Google. Zrezygnowaliśmy z niego, bo byłaby to kolejna ikona na górze, a menu systemu i tak otwiera się często. Sprawy osoby są w nim jedno kliknięcie dalej, a górny pasek zostaje taki jak był.
Język i wygląd przeszły do profilu, do nowej sekcji „Język i wygląd”. Język wybiera się z kafelków z nazwami języków, a wygląd z trzech kart z podglądem: tryb jasny, tryb ciemny i kolory systemowe. Zmiana działa od razu. Tak robi większość systemów z tabel niżej: te ustawienia zmienia się rzadko, więc nie muszą być w menu.
Każda pozycja jest w jednym miejscu. Tak samo jest w przeglądarce na telefonie.
Pulpit na razie zostaje w menu pod logo. Wyszukiwarki na liście kont jeszcze nie ma, dodamy ją osobno.
Gdy ktoś ma jedno konto
Tak jest u zdecydowanej większości osób, więc od tego trzeba zacząć. Lista kont pojawia się dopiero wtedy, gdy ktoś ma dostęp do co najmniej dwóch kont. Wcześniej też tak było, ale menu pod logo i tak się rozwijało, bo były w nim profil, wylogowanie, język i motyw.
Teraz profil i wylogowanie są na dole menu systemu, a język i motyw w profilu. Osoba z jednym kontem i bez uprawnień do ustawień konta miałaby więc pod logo menu z samym Pulpitem. W takim przypadku logo nie rozwija żadnego menu, tylko od razu przenosi na pulpit, tak jak w Google czy HubSpocie. Administrator z jednym kontem widzi pod logo Pulpit i Ustawienia konta, a wszystko, co osobiste, ma na dole menu systemu.
Tak samo robi Odoo, które pokazuje przełącznik firm dopiero przy więcej niż jednej firmie. Google i HubSpot pokazują jedno konto na górze menu, żeby było widać, na jakim koncie się jest. Linear pokazuje „Przełącz firmę” zawsze, nawet przy jednej.
W aplikacjach na telefon lista kont w arkuszu też będzie się pojawiać dopiero przy co najmniej dwóch kontach. Przy jednym arkusz zaczyna się od osoby, a zaraz pod nią są ustawienia i wylogowanie.
Intum przed i po
| Intum przed | Intum po | |
|---|---|---|
| Lewy górny róg | logo: firma i osoba razem (Pulpit, Fakturownia, Ustawienia, Mój profil, Wyloguj, konta, język, motyw) | logo: firma (Pulpit, Ustawienia konta, Fakturownia, konta) |
| Awatar | nie było | nadal nie ma, żeby nie dokładać ikony w górnym pasku |
| Menu systemu (prawy górny róg) | tylko moduły | moduły, a na dole osoba: imię i e-mail (prowadzą do profilu) i Wyloguj |
| Przełączanie kont | lista zaraz pod Wyloguj, bez nagłówka | lista „Konta” w menu pod logo, oddzielona od reszty |
| Bieżące konto | niczym się nie wyróżniało | pogrubione, ze znacznikiem |
| Wyloguj | w środku menu, między profilem a listą kont | na dole menu systemu, na czerwono |
| Gdy jest jedno konto | logo otwierało menu bez listy kont | bez uprawnień do ustawień logo prowadzi prosto na pulpit, u administratora otwiera Pulpit i Ustawienia konta |
| Język i motyw | na dole menu pod logo, małe przyciski | w profilu, w sekcji „Język i wygląd”: kafelki języków i karty motywu z podglądem |
| Aplikacja na telefon | natywny arkusz konta i stare menu spod logo w panelu | na razie bez zmian |
Jak to jest u innych
Te same pozycje w aplikacjach, z których korzysta najwięcej firm:
| Slack | GitHub | Microsoft 365 | ||
|---|---|---|---|---|
| Lewy górny róg | logo, prowadzi do strony głównej | nazwa firmy: ustawienia firmy, zaproszenia | logo, prowadzi do strony głównej | siatka aplikacji |
| Awatar | konta, zarządzanie kontem, Wyloguj | profil, status, preferencje, Wyloguj | profil, repozytoria, organizacje, ustawienia, Wyloguj | konto, przełączanie kont, Wyloguj |
| Przełączanie kont | w menu awatara | ikony firm w pasku po lewej | w menu awatara | w menu awatara |
| Bieżące konto | na górze menu, z e-mailem | podświetlona ikona firmy | na górze menu, z loginem | na górze menu, z e-mailem |
| Wyloguj | na dole menu awatara | na dole menu awatara | na dole menu awatara | w menu awatara |
| Język i motyw | w ustawieniach | w preferencjach | w ustawieniach | w ustawieniach |
| Aplikacja na telefon | awatar na górze otwiera arkusz kont | zakładka „Ty” w dolnym pasku | zakładka „Profil” w dolnym pasku | w Teams awatar na górze otwiera panel konta |
Systemy CRM i ERP
| Salesforce | HubSpot | Zoho CRM | Odoo | |
|---|---|---|---|---|
| Lewy górny róg | siatka aplikacji | logo, prowadzi do strony głównej | logo i zakładki modułów | siatka aplikacji |
| Awatar | imię, ustawienia osobiste, Wyloguj | profil i preferencje, konto i rozliczenia, Wyloguj | profil, motyw, Wyloguj | dokumentacja, skróty, preferencje, Wyloguj |
| Przełączanie kont | brak, każda organizacja to osobne logowanie | w menu awatara | „Zarządzaj organizacjami” w panelu profilu, otwiera listę organizacji | osobny przełącznik firm w górnym pasku |
| Gdy jest jedno konto | nie dotyczy | konto na górze menu | - | nie ma przełącznika |
| Ustawienia firmy | ikona koła zębatego | ikona koła zębatego | ikona koła zębatego | aplikacja „Ustawienia” |
| Wyloguj | w menu awatara | na dole menu awatara | na dole panelu profilu | na dole menu awatara |
| Język i motyw | w ustawieniach osobistych | w profilu i preferencjach | motyw w panelu profilu | język w preferencjach, tryb ciemny w menu awatara |
W Intum pozycja „Ustawienia” nazywa się teraz „Ustawienia konta”, żeby było jasne, że chodzi o ustawienia firmy, a nie osoby.
Inni trzymają język i motyw w ustawieniach. W Intum też tak jest teraz: oba są w profilu, a nie w menu.
Aplikacje na telefon przestawimy na ten sam podział, gdy zmiana na komputerze trafi do wszystkich.