Page MenuHomePhabricator

Bring consistency to visual design of Interaction Timeline
Open, NormalPublic

Description

Interaction timeline is a tool made by Wikimedia Foundation. More about the tool here.

This task is to track the changes proposed by wikimedia design to bring the visual design of this tool up to our guidelines.

The changes will be grouped in following buckets

  • Colors
  • Layout
  • Typography
  • UI elements
NOTE: these proposed changes are only meant to change the styling and not the interactions or features

Event Timeline

Nirzar created this task.Feb 27 2018, 8:23 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 27 2018, 8:23 PM
Nirzar moved this task from To Triage to Design on the Readers-Web-Backlog board.Feb 27 2018, 8:23 PM

Note to readers-web team - RW backlog is tagged here just to track my own work :) ignore this card

Nirzar triaged this task as Normal priority.Feb 27 2018, 8:24 PM
Nirzar added a comment.Mar 1 2018, 9:06 PM

I applied the UI style guide to the interaction timeline
https://wikimedia.invisionapp.com/share/VRG4FI7NDJY#/282441034_Landing

  • The changes proposed here are only visual changes. mostly css related.
  • The only extra added feature I would say is shortcuts for last24hours, last 7 days, I thought that would be a convenient thing to add
  • Date formats are humanised
  • Colors, fonts, shapes are updated and accessible by WCAG standards T188664
  • Layout uses paper-base metaphor from style guide T188665
  • UI components used match the spec from OOUI

as you can see the overall outcome of applying our styles is making the interface look on-brand like
this https://wikimedia.github.io/WikimediaUI-Style-Guide/ or http://research.wikimedia.org or https://en.m.wikipedia.org/wiki/Bruno_Munari

Hi Nirzar;

I think your suggested changes look great. I love the shortcuts, that's pretty smart.

I think a lot of these visual changes will be simple and unintrusive, but I'm concerned about the spacing of elements. We've worked really hard on making sure the tools has high information density so our target users (administrators and power users) can see a lot of information in one go. The margins, spacing of elements, and font sizes were all decreased to have as many 'edit cards' on a 1366x768 monitor. This is the timeline now versus last November.

I'll have to discuss with David about what's easy to get from OOUI and what's not — we wanted to originally use OOUI assets but are building on toolforge, which added a level of complexity.

Nirzar added a comment.Mar 2 2018, 1:09 AM

I think a lot of these visual changes will be simple and unintrusive, but I'm concerned about the spacing of elements. We've worked really hard on making sure the tools has high information density so our target users (administrators and power users) can see a lot of information in one go. The margins, spacing of elements, and font sizes were all decreased to have as many 'edit cards' on a 1366x768 monitor. This is the timeline now versus last November.

very good point. I will create a compact version of this. designers love whitespaces :P

I'll have to discuss with David about what's easy to get from OOUI and what's not — we wanted to originally use OOUI assets but are building on toolforge, which added a level of complexity.

integration with actual OOUI library would be a tough one, matching the style of UI components would be easier. that kinda goes against consistency principles for future generations but again, the elements used here are basic. textbox, dropdown and calendar. should be fine.

Nirzar added a comment.EditedMar 4 2018, 10:53 PM

@TBolliger Here's a compact version with exact same content and comparison with current version.

we will be saving vertical space with new design. it's easier to scan yet dense in information.

I love it.

❤️ for using a real world example.

We may want a smaller calendar date treatment, though. We've seen some examples where there is only one edit per day (extreme example)

dbarratt added a subscriber: dbarratt.EditedMar 13 2018, 10:57 PM

designers love whitespaces

I must be a designer then. 😍

I really like your designs in T188435#4015634

@Nirzar is this still being worked on?

The Anti-Harassment Tools team cannot commit any additional development time for the Timeline (outside of urgent bugfixes) for the remainder of calendar year 2018.