search

LD4P / sinopia_editor

Sinopia Linked Data Editor
https://sinopia.io/
Apache License 2.0
35 stars 10 forks source link

UX audit #1706

Closed michelleif closed 4 years ago

michelleif commented 5 years ago

suggest fixes to Sinopia UX (in addition to Panel UI changes in LD4P/sinopia#261), anywhere in UI that needs cleaning up, inconsistencies addressed, etc. Things that will be relatively easy to change and will improve user experience and polish things up

astridu commented 5 years ago
  1. Global changes 1.1 Change from fixed width to fluid width to allow tables to expand and more panels to display 1.2 Dropdown style 1.3 Fonts 1.3.1 Page title size H1 1.3.2 Heading 1 size H3 1.3.3 Body text size is default 1.3.4 Font size for font awesome icons in table (small?) 1.3.5 Font size for font awesome icons at top of page (regular?) 1.4 All links must have underlines. 1.5 Buttons: Since the catalogers like buttons, here's a proposal for buttons image

This is what it looks like on the page. image

  1. Header 2.1 New design image 2.1.1 Font for 'Linked Data Editor': 30px 2.1.2 Font for links in upper right corner: 16 px 2.1.3 Font for main navigation: 16 px

  2. Search 3.1 Align dropdown and text field 3.2 left align the whole page 3.3 Table should span the page width

  3. Tabs image 4.1 font 16 px 4.2 'x' closes tab 4.3 '+' bring user to search and add a tab 4.4 '>>' scrolls through the tabs if there are more than 5 open at once.

  4. Resource Templates 5.1 Change download links to font awesome download icon. fa-download [] image

  5. Can we move the log in component into the 'highlights' box rather than at the top? 6.1 Remove 'Linked Data Editor' link at top of page 6.2 Put "Login to Linked Data Editor" above login box image image

  6. And move the logout to the header. image

  7. Modal image 8.1 White out the screen behind it (80% opacity) 8.2 Drop shadow on modal (50% black) 8.3 Corner radius = 2 (same as panels in record) 8.4 Border = gray 8.5 Background = same as light beige in panel F8F6EF 8.6 Heading 1 for modal title 8.7 body text for everything else

michelleif commented 4 years ago

@astridu can you also check tabbing behavior? there were some earlier tickets on that, but since we upgraded Bootstrap, maybe no longer issue?

1256

1250

1277

feel free to close any of those if they are no longer relevant thank you!

michelleif commented 4 years ago

@astridu also is #1281 still a UX issue?

astridu commented 4 years ago

1256 is an accessibility issue so we can't fix this if we need to be accessible. 1250 is still an issue and should be fixed as described. 1277 is still an issue. Is there a way to change the style of the highlight around the blue buttons because it's really hard to see it. Maybe it could be a white halo instead of blue halo? but if we change the button to a link, then this problem goes away. 1281 I cannot reproduce so I'm assuming it's fixed.

michelleif commented 4 years ago

writing new ticket for the "more panels to display" part of "1.1 Change from fixed width to fluid width to allow tables to expand and more panels to display"

michelleif commented 4 years ago

@astridu can you verify on development.sinopia.io that all the changes listed here look as you expected? and if they do, please close this ticket.

sinopia_editor#1761Fix search input alignment sinopia_editor#1780Investigate changing from fixed width to fluid width sinopia_editor#1781Change icon size sinopia_editor#1782Change link style sinopia_editor#1783Change button style sinopia_editor#1785New header design sinopia_editor#1786Left align resource template query box sinopia_editor#1787Left align search page elements sinopia_editor#1788Full width search results sinopia_editor#1789Resource template tab styling sinopia_editor#1790Resource template tab close button sinopia_editor#1791Change Download link to icon sinopia_editor#1792Change Import resource template / profile button sinopia_editor#1793Move login to News sinopia_editor#1794Change modal style sinopia_editor#1814Adjust font sizes sinopia_editor#1817Remove resource template result list header

astridu commented 4 years ago

Wow! everything is looking great! Just a few items left. Thank you!:

1783: The Copy URI button should have the blue outline style button 1785: When I enter an incorrect password, the error and login component ends up at the bottom of the page. Also, the bold text that is in the tab should not be underlined. 1786: Can you also make the font awesome import icon blue? 1794: I didn't see the white out background. Also, the radio buttons are really tiny on here. could we make them bigger so user can more easily click them? image

justinlittman commented 4 years ago

@astridu Thanks for the feedback; I've ticketed.

What do you mean by "Also, the bold text that is in the tab should not be underlined."

Also, the white out background was problematic, so we didn't implement. (It was breaking some tests and we couldn't figure out why.)

astridu commented 4 years ago

In the header, when the white tab is on 'Resource Templates' for example, the text in that tab shouldn't be underlined as another visual indicator that this is the tab user has selected and is currently on. image

astridu commented 4 years ago

It should look like this: image