Redesign strony osobistego konta edukacyjnego

Jest działająca autorska LMS do nauki w szkole psychologa Dmytra Karpacziowa.

Trzeba zaproponować nowy design nie łamiąc struktury i funkcjonalności.

Konkurs ogłaszany jest na redesign tylko jednej strony — strony z treścią kursu.

Strona kursu zorganizowana jest jak akordeon z wbudowanymi akordeonami. Również wewnątrz bloków z treścią mogą występować przyciski, które otwierają dodatkową treść.

Przed rzeczywistą pracą proponuję zbadać żywe biuro robocze (dostęp testowy będzie udostępniony na prośbę w wiadomościach prywatnych)

Zrzuty ekranu, które należy wziąć za podstawę przy przeróbce (to właśnie należy pokazać w swoim designie). Zawierają wszystkie kluczowe elementy i bloki szkoły:

a także jej druga część, która zawiera blok z pytaniami:

Warunki konkursu:

• Dla konkursu potrzebna jest tylko mobilna wersja designu (wersję desktopową później zrobi zwycięzca konkursu)
• Również zwycięzca konkursu ma zrobić redesign prostych stron:
  • logowanie 
  • zmiana hasła 
  • profil
• Kolorystykę najlepiej pozostawić (odpowiada stylowi firmowemu)
• Czcionki również najlepiej pozostawić (ale to już nie jest tak krytyczne, jak kolory)

Na co zwrócić szczególną uwagę:

• Obecnie w długim kursie, jeśli otwierasz moduły i tematy oraz przyciski – trudno zrozumieć, gdzie się znajdujesz.
  Brakuje drzewa nawigacji.

  Możliwe rozwiązanie:

  Umieścić na ekranie blok, który zawierałby przycisk-menu “hamburger” (jak na mobilnym) i nazwę tematu, który aktualnie przegląda użytkownik. Jeśli użytkownik nie znajduje się w żadnym otwartym temacie (na przykład, dopiero wszedł na stronę) – pokazywać tylko przycisk-menu.

  Ten blok jest przymocowany do górnej krawędzi ekranu (sticky-header).

  Po naciśnięciu na blok rozwija się i pokazuje strukturę (spis treści kursu) – moduły i tematy. Po naciśnięciu na dowolny punkt  będzie płynne przewijanie do tego punktu (tematu).

  Można nacisnąć tylko na dostępne tematy.

  Również konieczne jest w jakiś sposób oznaczenie wykonanych lub jeszcze niedostępnych tematów. Na przykład, obok ukończonego tematu – umieścić zielony znacznik, a niedostępną – wyświetlać 50% szarym kolorem.

  
  
• Pomarańczowe przyciski "Zadanie", które otwierają nową treść. Obecnie po naciśnięciu przycisku jego wygląd się nie zmienia i użytkownik nie wie, co robić dalej. Szczególnie aktualne po tym, gdy użytkownik wchodzi po jakimś czasie i widzi przycisk (który już naciskał) i nie rozumie - czy należy go nacisnąć, czy już otworzył treść.
  Rozwiązanie: Kiedy przycisk się rozwija, jego status powinien się zmieniać. Na przykład, zmienia się jego kolor z pomarańczowego na szary, a także dodać strzałkę-status (w prawo ᐳ i w dół ᐯ) z animacją (jak to zrobiono w tematach). Również po otwarciu tekst na przycisku zamienić na “Zwiń”
  
  
• w testowym koncie będą dostępne wszystkie tematy (otwarte), ale dla nowych użytkowników otwieranie tematów odbywa się stopniowo i widzą notatkę, że temat jest jeszcze niedostępny
  

Co się nie podoba (dlaczego organizujemy konkurs)

• design był najpierw robiony dla desktopu, a potem dostosowany do mobilu, trzeba odwrotnie
• niedbałość, coś gdzieś krzywo, nie zgrywa się itp. (niszczy efekt, że to poważna firma)
• na mobilnym bardzo dużo miejsca marnuje się w pustkę (marginesy itp.) - na obrazku ładnie, ale korzystać bardzo trudno
• nasz odtwarzacz audio jest customowy, dlatego jego design również warto przerobić, zajmuje za dużo miejsca, kontrola głośności może być usunięta (niemal nikt z niej nie korzysta)