Graphic Interface - Drafts and Ideas

[PabloCanalSuarez]

I'm opening this issue to enable a place to post our ideas and drafts for the graphic interface design. As we said in the quality goals, our application must be usable, and that means that the graphic interface should be intuitive for the user to use the application.

First, this is my idea for the main screen of the application:

As you can see, my idea shows a screen divided in three diferentiated segments:

• Left: panel for the user's account control. This part should have the main information about the user that is logged in. Name, surname (or nickname), the number of routes he/she has done, the date of the last route... There we can put any information we consider useful to be displayed.

• Center: this is the main panel. Here, all the routes are displayed in a scrolled-down way. The user will be able to scroll down to see the main information of the routes he/she has done. Also, we should consider adding a filter or search feature, to facilitate the operation of searching for an specific route. Other filter options should be considered, like date, duration, length of the route, etc.

• Right: this is the Friend panel. Here, the user will see all its Friends. Just the basic information will be displayed. Also, an Adding Friend feature should be considered.

[CarmenVigo]

Hi, I really liked your prototype. I asked a few of our trustful beta users and they gave me ideas to improve our main screen application. I'll explain the modifications first and then I'll upload the prototype, ok? First, in the logged user info they said they'd rather have like the month overview. Then, in the centre area, they only wanted to have their own routes with the media display (so they do not need to enter the route in order to see photos). Lastly, in the friends' section, they wanted to have a display of their recent routes (the name and the map). So... this is my screen (I hope it visualizes correctly):

• Where it says Actividad Reciente in the friends' area I mean Friends' Activity.
• In the images carrousel I wanted to portrait the feature of seeing the media I mention. Then, in the top right corner, I missed the notifications so I added the bell; and also the possibility of logging out. What do you think? We probably still need to refine our main screen a little bit more. :)

[PabloCanalSuarez]

I find that version of the design interface really interesting, thanks for sharing it.

I think your new way to display the routes is very useful, especially the media contents. Nevertheless, these features will be left until the last version of the application, as in the first prototype (v0.1) we will not show media contents at first (unless we have enough time to develop that feature).

[UO264850]

Hi, the prototypes look great, i have also asked users about the interfaces they are used to see, and the ones that they like. As the range of opinions was very wide, i resumed everything into 3 prototypes, which are the following:

For the first week, I will start developing the prototype that Pablo has posted, as it has just the basic functionality, and later we can try to add the functionality that Carmen proposed to make the application more complete. If you disagree tell me as fast as posible to adapt the interface to everyone's taste.

[PabloCanalSuarez]

LGTM

[CarmenVigo]

LGTM 👍

[ElenaRodriguezRio]

LGTM :)

[PabloCanalSuarez]

Useful links to read and learn about Material-UI in React:

• https://github.com/mui-org/material-ui
• https://material-ui.com/es/getting-started/templates/ (very useful one, has the documentation about all components of Material-UI)

[PabloCanalSuarez]

This issue isn't used anymore