Online/Offline UI Differences

[ninavizz]

Problem

When a journalist views the Client in offline mode, what does that look like?

Considerations

• How will parts of the UI requiring network connectivity be shown to communicate their non-functionality in Offline Mode?
• Will something outright go away, or be greyed-out?
• Where might there be suggestions or other affordances made to nudge a user to Sign In?
• When accessing the client for the first time in Offline mode, what might that experience look like?

Acceptance Criteria

• Clickable wireframe demonstrating interactivity
• All state changes clearly itemized/outlined
  • Spec'd wireframe, or multiple comments here?
• Get on the needs testing punchlist

---

This is a sub-task within #18 and #31 and #17

[ninavizz]

First Rev (submitted on Gitter, 07 Feb): CLICK ON TOP BAR to toggle back and forth between offline and online. Delete functionality for a Source Account also goes away, as does the drop-down menu on the Messages pane. https://invis.io/X4QEP5Y9EAT#/345671069_0_New_-_DR_On-_OFFLINE

[ninavizz]

Feedback (cut-and-pasted from Gitter):

E r i k: I'm a fan! I like avoiding the standard "grayed out UI controls" pattern which can be very frustrating for users, and this also takes up less space

Nina: Oh—fwiw, clarification with the above—in the wireframe, the paper airplane dealie is the "Send" button. I believe the existing Client has a proper button with the word "Send" on it. Yay, E r i k! Ya... the "omg, why won't this friggin' work?!" frustration quite sux.

A l l i e: hey nina this looks awesome

N i n a: Coolio!

A l l i e: trying to find the image of what will be on the ... menu

N i n a: You mean the content in that menu? I think E r i k will eventually do that menu as its own Issue/Story "Export All Messages & Files" and "Delete Source" are the only two items therein, for now... or probz "Export Source." We never did much testing on that menu.

[ninavizz]

(crap, sorry that @'d everyone!)

[sssoleileraaa]

@ninavizz - Hey just saw this and noticed that the conversation in gitter was left open-ended. I noticed while toggling back and forth between offline and online mode that you get a . . . options menu next to the date when online, so I was wondering if you had created any wireframes for this menu. I assume it'll include a way to logout? Is there anything else?

[ninavizz]

@creviera Nope, logging-out is handled from the user avatar having a dropdown-ish type thing. The dot-dot-dot menu you cite currently only has "Export All Submissions" and "Delete Account" on it, as of now. Older wireframes should show more functionality on it; I also don't really know what users may want in it, so could easily pack it with a dozen account-level options like "Export all files, delete all local files" etc... but wanna keep it to just those two account-level things, for now.

Anything pertaining to the Journalist's authentication or connectivity happens in the top bar.

[ninavizz]

I'd forgotten this ticket still existed!

Explorations, here: » Invision Mox (semi-interactive) «

Final direction, in Zeplin (ignore "Empty" pane content): Public Screen

[ninavizz]

Closing, cuz this is done? @eloquence feel free to reopen if you disagree. Wishing this had gone into a review, but there is only so much team bandwidth and time... :)