Classification Interface :: Design Pass

[heathv]

Here is my list of edits for the classification interface, nothing too wild (I hope!)

Here are the original, post IWM edits of the WD mock-ups for reference: https://www.dropbox.com/s/epnc7fm1j89gkv1/WarDiary-Mocks-Post-Edits.zip

Animations

• [x] Left sidebar: these columns slide out a bit slow. Looks the the transition duration right now is 1s—maybe .4s or .5s. Maybe an ease in-out similar to http://cubic-bezier.com/#.27,.01,.4,.99
• [x] The global nav menu I think has the same 1s slide down, could do with the same quicker slide.
• [x] Timeline & Comments: Rather than the slide-open, maybe a quick, .2s fade-in.

Layout

• [ ] I think I asked this before, but can the interface be 100% width and height of the browser window? I think the answer was that it affected the zooming nature for marking the subject, but if there is anyway we could make that happen it'd be awesome.
• [ ] If not possible, the background image could be 100% the width and height of the browser.
• [x] The battalion name & info is currently overlapping the icons to the right. Right now it's horizontally centered, but make it text-align: left. Should give it enough room.

Global Styling

• [x] Sidebar: looks like there is a black line on the right side of the green "Get tagging" column—please remove
• [x] Please add this to the global css, it'll help with rendering the text a bit clearer: -webkit-font-smoothing: antialiased !important;
• [x] Also, maybe add about .04em letter-spacing to all text

Talk Comments & Timeline

• [x] Add a border-radius of 6px to each window
• [x] Green Comment button: make it a bit taller, maybe 5px taller
• [ ] Both boxes need that little triangle blip

Tagging / Annotation Windows

• [ ] Text fields: Need to be flattened out / brought closer to the mock-ups.
• [x] Deleting tag: the red overlay could be a bit more opaque. Try 0.9 for opacity, and #ff5858 for the red color (0.9 for saving as well)
• [x] Annotation windows need more padding. Maybe 10px all around?
• [x] Icons aren't centered under the annotation windows
• [x] Annotation windows also need the border-radius: 6px

[heathv]

I should note these comments were made referencing this URL: http://demo.zooniverse.org/diaries/#/classify

[eatyourgreens]

Nothing too frightening there. The only tricky ones might be making the classifier fully responsive on screens larger than 1185px (it should fill the screen now on an iPad), and styling the form input fields consistently cross-browser.

I'm pushing the changes to http://zooniverse-demo.s3-website-us-east-1.amazonaws.com/diaries/#/classify We're holding off on making changes to http://demo.zooniverse.org/diaries while the beta testers are using it.