Przegląd
BigBlueButton to system konferencji internetowych typu open source do nauki online. Naszym celem jest zapewnienie uczniom zdalnym wysokiej jakości nauki online.
Jednym z mierników tego, jak dobrze osiągamy ten cel, jest pytanie: „Jak łatwo użytkownikowi, po kilku chwilach interakcji, opanować interfejs i kontynuować zadanie nauczania lub uczenia się?
Uważamy, że dobry interfejs ma kluczowe znaczenie dla powodzenia każdego produktu. W tym dokumencie przedstawiono przegląd decyzji projektowych, które podjęliśmy podczas tworzenia spójnego interfejsu dla klienta HTML5, który można używać na platformach mobilnych, tabletach i komputerach stacjonarnych.
Cele projektowe
Oczekiwania użytkowników
Obecnie użytkownicy oczekują, że aplikacje – szczególnie aplikacje mobilne – będą miały podobny interfejs użytkownika. W rezultacie podobne aplikacje ewoluowały i mają podobne interfejsy.
W aplikacji do konferencji internetowych użytkownicy mają wspólne wyjątki dotyczące udostępniania kamery internetowej, mikrofonu i ekranu.
Projektując klienta BigBlueButton, nie czuliśmy potrzeby tworzenia radykalnie nowych sposobów interakcji na kliencie mobilnym i stacjonarnym; raczej chcieliśmy zapewnić użytkownikom nowoczesny i przystępny interfejs, który byłby znany wszystkim na podstawie ich wcześniejszych doświadczeń z innymi aplikacjami.
Podejście przede wszystkim mobilne
Projektowanie przede wszystkim dla urządzeń mobilnych pozwala nam cofnąć się o krok od obecnego doświadczenia użytkownika i pomyśleć o minimalnym zestawie funkcji wymaganych przez użytkownika do zaangażowania się w sesję online (poniżej zobaczysz wiele zrzutów ekranu tych projektów).
Obecne środowisko użytkownika obejmuje szereg okien i układów dostosowanych do potrzeb różnych użytkowników. Jednak aplikacja mobilna nie ma systemu Windows. Zamiast tego jest to podstawowy zestaw elementów, które inteligentnie nakładają się na siebie, gdy użytkownik potrzebuje dostępu do nich.
Podobny zestaw elementów mamy w BigBlueButton
- Obszar prezentacji
- Czat grupowy lub prywatny
- Lista uczestników
- Wideo (kamera internetowa i komputer stacjonarny) udostępnianie)
- Preferencje
Ujednolicone doświadczenie
Zapewnienie ujednoliconego doświadczenia pozwoli naszym użytkownikom szybko zapoznać się z produktem i skrócić ogólną krzywą uczenia się. Jeśli korzystasz z klienta WWW, tabletu lub urządzenia mobilnego, naszym celem jest zachowanie spójnej stylistyki i rozmieszczenia elementów. Dzięki temu programiści będą mogli znacznie łatwiej wnosić wkład lub budować na BigBlueButton.
Spójne na różnych platformach
Aplikacja mobilna zapewnia inne wrażenia użytkownika niż aplikacja internetowa. W końcu są to różne formy interakcji: dotyk a mysz, urządzenie przenośne a ekran, dotknięcie a klawiatura. Z biegiem czasu rozwinęliśmy projekty, aby uwzględnić interakcję na pulpicie. Oczekujemy, że w miarę dojrzewania klienta HTML5 stanie się on domyślnym interfejsem na wszystkich platformach.
Dostępność
Dostępność jest bardzo ważna dla naszego docelowego rynku nauki online. Chcieliśmy mieć pewność, że projekty pozwolą nam zapewnić naszym użytkownikom różnorodne najlepsze praktyki w zakresie dostępności, takie jak punkty orientacyjne Aria, etykiety Aria, grzeczność Aria i zapewnienie palety kolorów dostosowanej do potrzeb użytkowników niedowidzących.
Rozszerzalny projekt interfejsu użytkownika
BigBlueButton to nie tylko rozwiązanie, ale platforma, na której budują inne firmy. Tworząc nowy projekt, jednym z naszych celów jest zapewnienie naszej społeczności konstrukcji modułowej, tak aby można było z łatwością tworzyć nowe funkcje i komponenty. Jeśli programista chciał na przykład dodać w interfejsie użytkownika moduł udostępnianych notatek lub dodatkowe elementy sterujące głośnością, chcemy mieć pewność, że wygląd i działanie będą spójne z istniejącym interfejsem użytkownika.
Dokument projektowy, który można udostępniać
W najnowszym projekcie naszego klienta HTML5 dołączamy dokument projektowy, który można udostępniać innym projektantom, aby mógł go wykorzystać jako punkt wyjścia do promowania marki klienta lub konceptualizacji nowych funkcji.
Pobierz plik aplikacji BigBlueButton Design Sketch
Projekty klientów | Wersja pierwsza
Poniżej znajdują się projekty naszej pierwszej wersji dla klienta HTML5 dla Internetu, tabletów i urządzeń mobilnych.
Widoki mobilne
Wraz z pierwszą wersją Widoków mobilnych HTML5 skupiliśmy nasze wysiłki na budowaniu funkcjonalności przeglądarki. Obejmuje to korzystanie z prezentacji, włączanie/wyłączanie dźwięku, interakcje emoji, a także możliwość uczestniczenia w publicznych/prywatnych rozmowach na czacie.
Widoki na tablecie
Widoki na tablecie mają ten sam wzór co telefon komórkowy.
Widoki pulpitu
W przypadku komputerów stacjonarnych zaczynamy zauważać, że więcej funkcji staje się dostępnych dla prezenterów i uczestników. Tutaj zobaczysz (jako prezenter) możliwość przesyłania slajdów, adnotacji, wielu tablic i napisów kodowanych.
Widok domyślny
Rozszerzony widok paska bocznego | Wiadomości publiczne i bezpośrednie oraz lista uczestników.
Pełny widok rozszerzony | Czat publiczny i prywatny.
Pokoje podgrupy
Przesyłanie prezentacji
Ustawienia użytkownika
Napis kodowany
Typy uczestników
Prezent: Jak pokazano powyżej, niebieski kwadrat w lewym górnym rogu awatara wskazuje, że uczestnik jest prezenterem. W prawym dolnym rogu znajduje się wskaźnik dźwięku dołączenia (ikona dźwięku + zielone kółko), a pierścień wokół awatara wizualnie oznacza, że ktoś mówi.
Moderator: Chcieliśmy wizualnie odróżnić moderatorów od wszystkich innych uczestników i zrobiliśmy to poprzez wizualną zmianę awatara na kwadrat. W stanie wyświetlonym powyżej zobaczysz także, że moderator ma wyciszony dźwięk (ikona wyciszenia + czerwone kółko).
Uczestnik: Uczestnicy są oznaczeni wizualnie za pomocą okrągłego awatara. W przypadku pokazanym powyżej uczestnik ten zdecydował się dołączyć tylko do słuchania dźwięku (ikona zestawu słuchawkowego + zielone kółko).
Przewodnik po stylach
Przegląd
W przewodniku po stylach wyświetlonym poniżej znajdziesz zestawienie podstawowej palety kolorów, typografii i stylów elementów używanych w kliencie HTML5.
Dostępna paleta kolorów
Jako zespół z pasją utrzymujemy najlepsze praktyki w zakresie dostępności w naszych produktach, a w przypadku color, chcemy mieć pewność, że wszyscy użytkownicy (niewidomi i niewidomi) będą mieli przyjemne doświadczenia. Poniżej znajdziesz szczegółowy przegląd naszej podstawowej palety kolorów i ich współczynnika kontrastu. Naszym celem było utrzymanie stosunku 4,5:1 powyżej.
Niestandardowa biblioteka ikon
W nowym kliencie HTML5 chcieliśmy uwzględnić udostępnianą bibliotekę ikon, z której programiści mogliby korzystać podczas programowania, i stworzyliśmy własną niestandardową bibliotekę ikon zawierającą ponad 80 ikon.
Projekty klientów | Planowane aktualizacje
Udostępnianie pulpitu
Gdy prezenter zdecyduje się udostępnić swój pulpit, zastąpi on istniejący obszar prezentacji. W dowolnym momencie prezenter może zakończyć współdzielenie biurka, a prezentacja zostanie wznowiona w pierwotnej lokalizacji.
Rozszerzanie elementów sterujących prezentacją
Zaktualizowane elementy sterujące prezentacją, które zostaną uwzględnione, to powiększanie, dopasowywanie do szerokości i dopasowywanie do strony.
Okno dialogowe audio z testem echa
Gdy użytkownik dołączy do sesji, pojawi się okno dialogowe wskazujące, jaką automatyczną trasę może wybrać, dołączając do dźwięku za pomocą mikrofonu lub tylko słuchając. Jeśli wybierze opcję dołączenia przez mikrofon, użytkownik zostanie poproszony o wykonanie kolejnego kroku z pytaniem, czy siebie słyszy (test echa). Stamtąd, jeśli wybierzesz „Tak”, przejdą do sesji.
Projekty klientów | Funkcje planu działania
Udostępnianie wideo
Udostępnione notatki
Wiele pokoi rozmów
Zarządzanie użytkownikami
Jeśli masz jakieś pytania lub uwagi, dołącz do społeczności BigBlueButton i opublikuj je na liście mailingowej bigbluebutton-dev. Czekamy na wiadomość od Ciebie.