Rozwiązanie

Zaproponowane rozwiązanie opiera się na efektywnym wykorzystaniu przestrzeni ekranu w trybie landscape, co zapewnia lepszą czytelność wykresów i większą przestrzeń roboczą dla narzędzi rysunkowych. Intuicyjny pasek narzędzi umieszczony na dole ekranu umożliwia szybki dostęp do funkcji rysowania linii trendu, bez zasłaniania wykresu. Interakcje dotykowe, takie jak przeciąganie palcem po ekranie w celu rysowania linii oraz dłuższe przytrzymanie w celu edycji lub usunięcia, zostały zaprojektowane z myślą o prostocie i ergonomii. Dodatkowo, menu kontekstowe z opcjami stylizacji umożliwia użytkownikom szybkie dostosowanie wyglądu linii trendu, co zwiększa funkcjonalność narzędzia.

Problem

Adaptacja narzędzi do rysowania linii trendu na urządzenia mobilne stawia wyzwanie związane z ograniczoną przestrzenią ekranu i potrzebą zachowania intuicyjności interfejsu. Użytkownicy muszą mieć łatwy dostęp do funkcji rysowania, edycji i usuwania linii trendu, bez zbyt dużego skomplikowania interakcji. Kluczowe jest zapewnienie, że narzędzia te będą czytelne i łatwe do użycia nawet na mniejszych ekranach smartfonów. Dodatkowo, konieczne jest uwzględnienie ergonomii korzystania z urządzeń mobilnych, aby użytkownicy mogli wygodnie obsługiwać narzędzia jedną ręką.

Projekt polegał na adaptacji narzędzi do rysowania linii trendu z wersji desktopowej na urządzenia mobilne, z uwzględnieniem intuicyjności interfejsu i ergonomii użytkowania. Stworzyłam interaktywne rozwiązanie z paskiem narzędzi w trybie landscape, umożliwiające łatwe dodawanie, edycję i usuwanie linii trendu za pomocą gestów dotykowych.

Wireframe

W ramach projektu adaptacji narzędzi do rysowania linii trendu na urządzenia mobilne, stworzyłam serię wireframów przedstawiających kluczowe interakcje użytkownika na ekranie iPhone'a. Pokazują one ekran główny z wykresem oraz opcją rozwinięcia paska narzędzi u dołu i opcją wyboru narzędzia do rysowania.

Desk reasearch

W ramach przygotowań do projektowania interaktywnego rozwiązania do dodawania, edycji i modyfikacji linii trendu na urządzeniach mobilnych, przeprowadziłam desk research, aby zrozumieć obecne standardy i najlepsze praktyki w tej dziedzinie. Skupiłam się na analizie interfejsów użytkownika (UI) oraz doświadczeń użytkownika (UX) dostępnych w narzędziach do rysowania linii trendu.

Analiza interfejsu
 

Proces dodawania linii trendu:

• Wybór narzędzia do rysowania: W interfejsie użytkownik wybiera narzędzie z menu kontekstowego.

• Dodanie linii trendu: Użytkownik klikając na wykres, może przeciągnąć linię trendu w wybranym kierunku.

• Edycja i stylizacja: Po dodaniu, użytkownik może edytować linię, zmieniając jej kolor, grubość oraz styl.

• Usuwanie: Użytkownik może usunąć linię trendu, klikając na nią prawym przyciskiem myszy i wybierając opcję usunięcia.

Adaptacja do urządzeń mobilnych

Wybór układu: landscape vs. portrait

Po dokładnym przeanalizowaniu przestrzeni ekranu oraz ergonomii korzystania z urządzeń mobilnych, zdecydowałam się na układ landscape. Jest to bardziej efektywne wykorzystanie przestrzeni, szczególnie w kontekście wykresów finansowych, gdzie szerokość ekranu odgrywa kluczową rolę w czytelności danych.

Kluczowe funkcje i interakcje:

• Wybór narzędzia do rysowania: Intuicyjny pasek narzędzi umieszczony na dole ekranu. Umożliwia łatwy dostęp do narzędzi rysunkowych, takich jak linia trendu, bez zasłaniania wykresu.

• Dodanie linii trendu: Dotknięcie ekranu w miejscu, gdzie użytkownik chce rozpocząć rysowanie linii, a następnie przeciągnięcie palcem w wybranym kierunku.

• Edycja i stylizacja: Menu kontekstowe pojawiające się po dotknięciu linii. Zawiera opcje zmiany koloru, grubości oraz stylu linii. Wersja mobilna musi oferować możliwość szybkiej edycji, z minimalną ilością kliknięć.

• Usuwanie: Po naciśnięciu i przytrzymaniu na linii trendu pojawia się opcja usunięcia.

Dark mode

W ramach projektu zaprojektowałam również tryb ciemny, aby zapewnić użytkownikom lepsze doświadczenia wizualne i komfort podczas korzystania z aplikacji w słabym oświetleniu. Dark mode nie tylko zmniejsza zmęczenie oczu, ale także nadaje interfejsowi nowoczesny i elegancki wygląd. Wszystkie kluczowe interakcje, takie jak rysowanie, edycja i usuwanie linii trendu, zostały zoptymalizowane pod kątem trybu ciemnego, aby zachować spójność i czytelność. Dzięki temu użytkownicy mogą płynnie przechodzić między trybami jasnym i ciemnym, dostosowując aplikację do swoich preferencji i warunków oświetleniowych.

Hi- fidelity UI design

Zaprojektowałam szczegółowe i zaawansowane interfejsy użytkownika (UI) dla aplikacji mobilnej do rysowania linii trendu. Skupiłam się na stworzeniu intuicyjnego, estetycznego i funkcjonalnego interfejsu, który umożliwia łatwe dodawanie, edycję oraz usuwanie linii trendu. Wykorzystując nowoczesne zasady projektowania, dostosowałam interfejs do trybu ciemnego, aby zapewnić użytkownikom komfort i lepsze doświadczenia wizualne w różnych warunkach oświetleniowych. Hi-fidelity UI design obejmuje wszystkie kluczowe interakcje i funkcje, zachowując spójność i czytelność, co pozwala na płynne i efektywne korzystanie z aplikacji.

Proces projektowy wymagał dogłębnej analizy ograniczeń i możliwości urządzeń mobilnych, co zaowocowało przemyślanym układem interfejsu i zoptymalizowanymi interakcjami dotykowymi. Wprowadzenie trybu ciemnego pozwoliło na stworzenie spójnego i estetycznego doświadczenia użytkownika, niezależnie od warunków oświetleniowych.

Paula Sobolewska

pj.sobolewska@gmail.com
570 170 020

Strona zrobiona w WebWave.