search

sashuk / watsonc

WatsonC Vidi extension
0 stars 2 forks source link

Responsive Calypso #68

Open JacobBirk opened 5 years ago

JacobBirk commented 5 years ago

One of the major tasks before the release of this edition of Calypso is to make calypso responsive.

sashuk commented 5 years ago

@JacobBirk Could you please specify if there are any already existing wireframes of the design for different screens?

JacobBirk commented 5 years ago

@sashuk Not at the moment, but our UX man may produce som next week. Or you may come up with a suggestion. What do you prefer ?

sashuk commented 5 years ago

@mapcentia @JacobBirk I think it would be more optimal to have a UX from an actual UI/UX specialist if it is okay.

JacobBirk commented 5 years ago

Okay. And who is that? You?

Jacob

Fra: Aleksandr Shumilov notifications@github.com Sendt: Wednesday, July 24, 2019 12:54:51 PM Til: sashuk/watsonc watsonc@noreply.github.com Cc: Jacob Birk Jensen jbj@watsonc.dk; Mention mention@noreply.github.com Emne: Re: [sashuk/watsonc] Responsive Calypso (#68)

@mapcentiahttps://github.com/mapcentia @JacobBirkhttps://github.com/JacobBirk I think it would be more optimal to have a UX from an actual UI/UX specialist if it is okay.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/sashuk/watsonc/issues/68?email_source=notifications&email_token=AL7IMDPCMDFRTQ7WDRBPWGDQBAYHXA5CNFSM4IGFFFGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2V65CA#issuecomment-514584200, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AL7IMDKC7GTWCSSOUDZREDTQBAYHXANCNFSM4IGFFFGA.

olemunch commented 5 years ago

@sashuk @mapcentia Kristian made this to illustrate how we would like CALYPSO to behave on a small screen https://xd.adobe.com/view/57c14fef-d25d-4a9b-722f-2087fdff24e8-21f0/ Please let us know if this is usefull for you

ksnwatsonc commented 5 years ago

@sashuk @mapcentia In the startup wizard, the two options should be stacked on top of each other. If the user wants to start a new project, the two steps are split into two screens as seen below. If the user wants to open an existing project, it should look like in the desktop version, but more narrow of course. iPhone 5-SE – 1 iPhone 5-SE – 3 iPhone 5-SE – 4

ksnwatsonc commented 5 years ago

@sashuk @mapcentia The screen below shows how we imagine the view after you get past the startup wizard. In the top left corner you can tap "Søg…" to open the search bar. This can be closed again by tapping the "X" that appears in the search bar.

In the top right corner, a tap on the burger menu will open the right side menu. The overview will fill out most of the screen. If the user chooses one of the options in the menu, the selected will lay on top of the menu, possibly filling out even more of the screen. The most important thing is that text and buttons are big enough for the mobile user. The menu can be closed by tapping a "X" or dragging it back to where it came from.

In the bottom right corner, the user can tap the map icon to show the map functions. Close by tapping map function again.

In the bottom, the user can drag up the dashboard by the grey handle. or simply just tapping it. The dashboard has 2 level of sizes like in the desktop version. It is not possible to view in matrix grid, as it would be too small for most mobile users. It should be possible to view a single timeseries or profile in 100% fullscreen mode. The dashboard is closed again by dragging it down towards the button.

Check Ole's link to see all screenshots from the mockup.

We are in doubt whether all functions (eg. the profile tool) should be included in the mobile version, but maybe we will be wiser on that when the main functions has turned mobile friendly. :) iPhone 5-SE – 6