Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX and UI review #23

Open
MichaelMure opened this issue Apr 26, 2017 · 40 comments
Open

UX and UI review #23

MichaelMure opened this issue Apr 26, 2017 · 40 comments

Comments

@MichaelMure
Copy link
Owner

Some polish is needed, please provide feedback here :)

@htmelton
Copy link

I wrote up a doc, viewable here because it is a bit long for a comment, with some of my own thoughts regarding the UX, as well as what happened when I had a few friends test the app for the first time.

Over the next several days, I'll make some wireframes that show the ideas I had for usability improvement. I'd also be happy to make some nice, polished UI mockups later!

@MichaelMure - Do you want me to post images in this thread, in a separate issue, or somewhere else?

@MichaelMure
Copy link
Owner Author

Thank you ! Awesome work.

Images are fine here. Actually, the whole document is fine here too so everything is at the same place and doesn't get lost.

I'll reply in more details a bit later.

@MichaelMure
Copy link
Owner Author

MichaelMure commented Feb 14, 2018

First, I just wanted to say that I appreciate that you actually suggest solution instead of just saying "this doesn't work" 👍 👍
On a side note, I'm using https://material-ui-next.com (the beta version, not http://www.material-ui.com/)

  • expandable menu with labels
    --> that's a good idea and probably necessary. A good compromise between label accessibility and space used.

  • sub-par icons
    --> totally agree. For now I'm using FontAwesome icons due to my limited graphics skills. Suggestion welcome !

  • inconsistent error colors
    --> good catch

  • bad error color with dark theme
    --> good catch too ! I added the dark theme later so they may be more place with inconsistencies

  • layout: inconsistent use of space
    --> Yeah I agree, it kinda feels inconsistent. I did it that way because I didn't see a better solution. There is probably a need for a more in-depth refactor of the UI.

  • user's profile picture at the top left
    --> I don't understand this one, the user's profile picture is at the top left (where you clic to open the full profile). Do you speack about something else ?

  • magnifying glass for the search bar
    --> good point !

  • confusion when closing the 'share' panel
    --> yes indeed. Maybe signal that the draft is saved with a snackbar ? https://material-ui-next.com/demos/snackbars/

  • onboarding/documentation
    --> documentation will definitely be useful, but my goal is the have a UI/UX that doesn't need a documentation for most of the people. I think that the empty spaces when there is no data yet (no contacts, no shares ...) could be used to display instruction of guide the user. But again, I don't really know how that can materialize. Help very welcome here, it's an important topic imho.

  • rename "Upload" to "Your shared files"
    --> good point, although it's much longer so we'll have to see it that doesn't break the UI

I will deal with the easy wins in the next few days:

  • inconsistent error colors
  • bad error color with dark theme
  • magnifying glass for the search bar

Those are also easy to do if we can finalize something

  • rename "Upload" to "Your shared files"
  • confusion when closing the 'share' panel

@htmelton
Copy link

@MichaelMure

To answer your question about the profile photo at the top left-- I think I meant top right, sorry! I will edit it when I get home. In all of Google's Material apps, like Gmail, Drive, Calendar, etc, the user's profile information is in the top right corner when viewing on a desktop.

Example from Google Calendar:
google calendar

Also, regarding icons-- I have a lot of free use icon packs, so I will look through them for some replacements.

@MichaelMure
Copy link
Owner Author

Ho, that make sense ... In the beginning, the right panel content was going up to the top of the window, but I aligned it to the left panel following some advise. Now there is space to use for the profile and maybe other things..

For the icons, be careful. It has to be with a license compatible with the project (GPLv3). Just non-paying is not enough.

@MichaelMure
Copy link
Owner Author

@htmelton
For the background of the error, I didn't find the '#ef7773' color in any palette provided by material-ui (not sure why ?) so I used '#e57373' which is present in the error palette and visually very close. It's also the same color used for the light theme. I could hardcode the color value but I guess it's best to use palette color if possible if that's fine with you. e175695

@MichaelMure
Copy link
Owner Author

MichaelMure commented Feb 15, 2018

@htmelton
For what I named 'inconsistent error colors', I actually got it wrong. What you say is that an error in a form should be presented the same way to the user. Currently in Arbore, there is 3 classes of error feedback:

  • field error : the content of a field is not valid (empty when required, wrong format ..). It's the kind of error that can be detected when filing the form and can be linked to a specific field.
  • form error : it's an error feedback for the action triggered by the form submit. It can't be linked to a specific field (at least not easily). It's displayed in directly in the form.
  • global error: an error happened in the background, not linked to a specific user action. It looks like this at the bottom of the window and can be closed:
    image

I just found out that I actually don't use the global error anymore but it's available.

The form for adding a contact with a pubkey is a weird case because there is a single input field so the resulting error (of all the form) could be assigned to this field. But it seems more consistent to me this way. What do you think ?

Edit: that said, this form could have a stronger validation to give a feedback early when the text entered doesn't looks like a pubkey.
Edit2: this is done:
image

@MichaelMure
Copy link
Owner Author

@htmelton
Magnifying glass on the contact's and share's page search field is done. It looks like this:
image

@htmelton
Copy link

@MichaelMure Yes, that color is fine. I came up with the other one using a color picker extension for Chrome, so it isn't officially listed anywhere.

As for your question with the pubkey field, it's a good idea to have the early feedback like you've now implemented!

@htmelton
Copy link

So, tonight I made some very basic wireframes that show off how I'm thinking the top bar and sidebar could look and how we can make better use of the screen space. I wasn't sure where to begin so I focused on the contacts section because it's the first thing a user sees after they make an account. I drew on a lot of inspiration from Google Contacts.

Contacts Wireframe Possibilities

View Contacts List
view contacts

Clicked on Individual Contact
view a contact

Hide/Delete Contact
view a contact menu

Floating Action Button Transformed to Add Contacts
new contact menu

Add By Pubkey
add contacts

Suggested Contacts (also shows collapsed sidebar)
suggested contacts

Notes

As I mentioned, I was inspired by Google Contacts and thought about some ways to incorporate that into the app to help make better use of the space. I added a floating action button that transforms into a menu to be more consistent with Material Design guidelines, but the FABs are not mandatory so we can change it if you prefer the old style of button.

I grouped hide and delete a contact under an overflow menu because the actions that can be taken in the dialog box should be grouped together, but having a toggle switch and a button or trash icon next to each other looked inconsistent.

Finally, I used the Material icons I had available but I am looking around for some nicer icon kits that have the license we need. I will also think some more about how expanding and collapsing the sidebar may affect the layout so the spacing isn't 100% polished yet.

@htmelton
Copy link

Wireframes Showing 2 Column + Menu Layout

View Contacts
view contacts

Contact's Information
view contact info

Add By ID
view contacts add by id

Suggested Contacts
view contacts suggested

Notes

Here's a version with 2 columns and no popup windows. To keep the 2 columns but reduce the potential for clutter, I thought maybe we could group the items in the second column into a card view (or a grid of cards, where applicable) and have that standardized across the app anywhere there is content in the second column. How it is right now, there isn't a clear visual "border" (for lack of a better term) that groups the information together in the second column, while in the first column, each element is neatly in its own little block with a clear border. So putting the second column in card view might make it seem more cohesive and not cluttered, as I think everything that's currently in the second column on each part of the app can be made into cards.

@MichaelMure
Copy link
Owner Author

Good work ! A few thoughts:

  1. I guess that make sense to move the "add by ID" and "add by suggest" content to the right column. There is more space there and the left column can be made thinner if needed. The idea behind the current design is to use the same space as a contact in the list as a suggestion, a "ghost contact". Meaning "interact with this to make it real". IMHO, the current design is kind of good looking, but it's not fully working UX wise (no cancel/"go back" possible on the second step, kind of cramped, a bit unusual/offsetting ...). I still kind of like it but it's good to look for other ways.
  2. Using cards on the right column make sense i guess
  3. Your thoughts on having the menu go all the way up to the top of the window ? There is not that much things to place on the top bar.
  4. The search bar goes away from the actual list it's acting on, so it become less obvious what it is for. That said, it's probably not often used so I guess it's fine (?).
  5. The chat window and the settings window currently don't have a top bar. What about them ? Top bar with just the profile ? No top bar ?
  6. I'm not really a fan of the (+) floating button bottom right. I know it's part of the google design, but it feel really mobile-ish. And as the window can easily be big on a desktop screen, it can be quite far away from where the eye tend to look. It can be far enough that come people will not even see it IMHO. This is a very critical action from the user during the onboarding so it should be extra obvious (no contacts mean you can't do anything).
  7. Having a mutli-purpose right column might be tricky at times. Let say that you are adding contacts by suggest. When you select a contact on the list (left column), the suggestions disappear and are replaced by this contact details. What happen in the same situation but with a "add by id" ? There might be a contact fetch currently processing and it would hide without recover possible this process, including potential errors. That said, there is currently the same problem if you switch to another page during this process, but it could be made more persistent.

It's hard to make things simple :-(

@htmelton
Copy link

Yes, the menu can go up to the top of the window past the bar. Either way is accepted in Material Design.

Regarding the settings and chat windows, I think it's probably best to have the top bar there anyway for consistency (but maybe without a search box because you can't search there).

To be honest, I am not sold on the floating action button either. I've been trying to think of some possible alternatives, but we could just put a way to cancel/go back in the current setup.

Finally, on your last point-- there are some ways to get around that. One way would be to make the left column wider and the list items expandable so when you click on the dropdown, the contact details show like on the "Topics" screen here and keep the right column available for suggestions/add. Another way would be if the contact details could open above the suggestions/add and push them down instead of making them disappear (not sure if this is possible).

@MichaelMure
Copy link
Owner Author

Yes, it's possible to scramble the UI. It's made with React and Redux, which means that it's just component in a hierarchy. Redux helps to avoid heavy dependencies between components, so using a different layout would not be that much work.

@htmelton
Copy link

Some expanded and closed navigation ideas with the new icon set I found. I thought the 3 connected circles button might be better for the share something page because it doesn't look like a message (which confused people in the usability test) and was ranked as the most easily recognizable in this study.

navigation outline dark
navigation outline expanded dark

navigation outline light
navigation outline expanded light

@MichaelMure
Copy link
Owner Author

Awesome 👍

I notice that you don't have the dividers that groups the icons by theme. Is that by choice ?

Also, there is a need for a button (at the bottom i guess) to open/close the menu. What would you use ?

@MichaelMure
Copy link
Owner Author

image image image image

Here is some variations:

  1. with the feather icon set
  2. withe the 'activity' icon instead of 'zap'
  3. without dividers
  4. with lighter dividers

What do you think ?

@MichaelMure
Copy link
Owner Author

MichaelMure commented Feb 23, 2018

I implemented the open/close menu:
image image

  • the profile is still up there until it gets moved on top.
  • the tooltip is still there when the menu is collapsed. Should I remove it ?
  • I pushed the settings to the bottom with the open/close button
  • the state of the menu is persisted across sessions

@htmelton
Copy link

I do like the "activity" icon here. I think I prefer the menu either with the lighter dividers or completely without.

I think Google traditionally uses the hamburger menu to expand the sidebar and a backwards arrow to close it, but I'm not a fan of the hamburger menu and its effectiveness is pretty heavily debated. For now, I think the collapse at the bottom is fine.

@MichaelMure
Copy link
Owner Author

Ok, what about:
image image image image

@htmelton
Copy link

I like the double arrow version!

@MichaelMure
Copy link
Owner Author

Good choice 👍

@MichaelMure
Copy link
Owner Author

@htmelton I started moving the search bar and the profile in a top bar. Have a look.

@htmelton
Copy link

Looks good!

@MichaelMure
Copy link
Owner Author

MichaelMure commented Feb 24, 2018

@htmelton I also reworked the chat and settings page to have the top bar and used the color scheme of your mockups. I also added a logout button in the top bar:

image

It's looking good everywhere but the chat window, it's less happy there

image

What do you think ? What would you change ?

@MichaelMure
Copy link
Owner Author

And also, the respective background colors with the light palette are much less contrasted:
image

Is that ok ?

@ghost
Copy link

ghost commented Feb 26, 2018

@MichaelMure, @htmelton You guys need any help with the desktop app?
Any screens that you're looking to improve or design?

@ghost
Copy link

ghost commented Feb 26, 2018

Also, I'm unable to run the desktop app on my Windows 10. It says IPFS not found.

@htmelton
Copy link

@MichaelMure I will think about the chat screen today.

@YashA08 Hi, nice to have you join! Do you have any thoughts on how we can improve the chat screen?

@ghost
Copy link

ghost commented Feb 26, 2018

Hi @htmelton, I haven't got the chance the look at the screens as yet. I'm to get the app running on my laptop first.
I'll keep you guys updated.

@htmelton
Copy link

@MichaelMure I was thinking of a few easy ideas that may help the chat screen. I think one of the main problems is that the conversations bar looks a little cramped.

  • Increase the padding on the conversations bar... right now the text basically touches the navigation
  • Maybe try extending the conversations bar all the way to the top so it's the same height as the navigation
  • Add some space after the heading "Conversations" like an empty line before having the items

@MichaelMure
Copy link
Owner Author

Like this ?
image

Or with the contact bar up to the top:
image

With this as the fallback:
image

@htmelton
Copy link

@MichaelMure Visually, I think I prefer the conversations bar to be all the way up to the top so it matches the sidebar.

I have some thoughts on the layout of the part of the screen that displays the actual chat messages as well... will draw up some sketches tonight

@MichaelMure
Copy link
Owner Author

MichaelMure commented Mar 3, 2018

@htmelton @YashA08
I reworked how background colors works to use a fixed set of named colors. Here are the one I use now:

const dark = createMuiTheme({
  palette: {
    type: 'dark',
    background: {
      main: '#303030',
      dark: '#252525',
      light: '#424242',
      darker: '#202020',
      emphasize: '#484848',
    }
  },
})

const light = createMuiTheme({
  palette: {
    type: 'light',
    background: {
      main: '#fafafa',
      dark: '#f5f5f5',
      light: '#ffffff',
      darker: '#e0e0e0',
      emphasize: '#dcdcdc',
    }
  },
})

So now I can change them easily. Is that good colors ? Also there may be some quirks here and there, please report if you see something wrong.

Btw, you need to run npm install again?

@htmelton
Copy link

htmelton commented Mar 3, 2018

@MichaelMure Looks pretty good, but is there a reason the search bar is now a different color than the rest of the top bar? It makes it kind of look like it's not a part of the top bar. think it would look most cohesive if it was the same color, or if the search bar was thinner and and had padding around it, like this example from Google Drive, so it would look like it's still "inside" of the top bar.

screen shot 2018-03-03 at 4 35 47 pm

@MichaelMure
Copy link
Owner Author

@htmelton fixed, I missed that.

@MichaelMure
Copy link
Owner Author

@htmelton @YashA08
I moved the "Edit Profile' button as a pen icon, what do you think ?
image
image

@htmelton
Copy link

htmelton commented Mar 7, 2018

@MichaelMure Looks good! If you want, I can do an A/B test with the images

@MichaelMure
Copy link
Owner Author

I implemented a global privacy switch to stop sharing your contact list with your own contact if you want to:
image

I also reworked the contact details view, with a reminder when the global privacy is enabled:
image

As always, comments welcome

@poppingdragon
Copy link

poppingdragon commented Mar 11, 2018

Hi @MichaelMure Is there any place where I can take a look at the full UI of Arbore? I tried downloading the program but it wouldn't run
EDIT: I think it works now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants