egghead-ui
egghead-ui copied to clipboard
eggheadio
Lesson Overviews have unclear presentation
The LessonOverview component has a lot of potential to deliver information quickly and provide the UI to manage the state and progress of instructor content through publication.
The rows provide a significant amount of room on the screen to pack in some additional information to provide context and clarity.
Specifically there are two areas that could use additional information and visual treatment.
current lesson rows
Current lesson state
As it is currently the state of the lesson is presented with neutral color in a relatively small font. This might be the most important information on the entire card, and it is camouflaged in the upper right.
The current state of the lesson should be highlighted prominently. Instead of, or alongside, the literal name of the state (which is an egghead backend concern, not an instructor concern) we should describe the current publication state of the lesson in a verbose way that describes the current stat and more importantly what to do next. This should be a general rule when presenting states to the user, with exceptions for "advanced" style views.
Action items
This is a similar issue. The text currently on the "button" to approve a submitted lesson is "approved" with a green check. This is an obvious error with the "d" on the action, but the entire button is misleading wherever it appears because of the green check. The order of the buttons is generally confusing as it should rank left to right in order of "probably gonna push". Basically they should read like English. This is a general rule.
We should consider another icon or color for "approve" that doesn't look like a completion indicator.
The actions themselves don't really have the appearance of buttons or indicate in a significant way that they can or should be pressed. You are required to hover over the text content to get the first indication of pressibility, and the entire item is not clickable. Overall it should look and act as a whole as a pressable structure. Be the button expect and need action item!
Vertical presentation of these action items means we are extremely limited with the actual text labels. Since these rows are gigantic, can we present these items as a vertical stack?
A lot of the information in this story is specific to the full screen instance; I'd suggest also checking the instances with other input and screen sizes as well as the layout changes based on the container size as can be tested here: https://styleguide.egghead.io/components/LessonOverviews
But yes we need to address making these actions more clear. Interested in @vojtaholik's thoughts.
All lesson actions should be considered as well which are not represented in the story. Yes this is JS, but here is the full list which shows which color + text + icon is currently associated with each lesson state: https://github.com/eggheadio/egghead-ui/blob/master/src/package/utils/lessonStates/index.js#L4-L82
I'm open to any suggestions. Can I get a list of what should be changed? @joelhooks @vojtaholik and I can implement.
I'll provide designs, so far I've been exploring a visual potential behind all this, wip http://cloud.egghead.io/1J1Z0f022J2I
@vojtaholik Thanks Vojta, will look forward to what you come up with.
Couple of questions:
1. Lesson editing within IC. Should I count with that?
- if yes, "edit" and "upload video" actions wouldn't make sense anymore since you could tap a whole lesson card which would take you to the detail where you can edit it. I know we're planning this, not sure when though.
- Right now, tapping "edit" redirects you to
egghead.io/lessons/[...]/edit- so buttons make sense there.
2. Bulk actions for admins/mentors. Do we want that?
3. As a mentor, I'm allowed to approve, decline or request changes. Only admins can retire, publish or cancel a lesson. True? Just checking.
4. Have you been thinking about showing a little video thumbnail within a lesson list item? Or a play button which would open a popup with video for fast checking? It would also serve as a nice state indicator saying "lesson already contains a video file". Just an idea.
5. Do we have a "disclaim" option? When instructor claims a lesson, he should be able to "disclaim" it. Or do we just call it "cancel"? This might be confusing. Oh I see, we don't provide this option for instructors, it disclaims automatically when one doesn't touch it for some period of time. I guess I just answered it myself.
In order to provide cool adjustments, I'd like to dive more deeply into this and probably suggest more changes than just a new icons for actions and state indicators. Let me know whether that makes sense, maybe I should just focus on what we have currently - which could change rapidly after implementing lesson editing within IC.
What I’m quite confident about is dividing list item into three parts. There’s a state indicator at the left. Topic headline, instructor face+name and tag image in the middle (we could add "next step" sentence as well). Right side would always carry actions. So you can easily read it from left to right (state, topic+author, next step). Though mobile won’t be THAT nice.
I'm asking myself:
- How to highlight next step action (e.g. "upload video") from other actions? Is highlighting button even best practice? Would adding a sentence describing what to do next be enough?
- How to display actions nicely so it won't get overcrowded when having more items in one column? And to be able to use longer action titles?
- What to do with actions on mobile? Hide them under dropdown? Nothing?
- How to differ instructor actions from admin ones (or mentors)? Is it even necessary?
I'm dealing with that now: http://cloud.egghead.io/352m1B1P0r2I
@vojtaholik Thanks for your help; here is what I know per your questions:
- Not sure, I'll defer to @joelhooks. All I know is the plan is to move the egghead-ui screens (previously known as the Instructor Center) into egghead-rails, so the edit screens will live in the same place as the new screens.
- What do you mean by bulk actions?
- Mostly; the way the actions work (and all permission based things) is that if the user has access to do something, it shows up in their data, so we then show it in the UI. So, for example, once an instructor has 12+ lessons they can self-publish, so their data is updated which updates the UI to show the "Publish" action. Currently, only Zac, Joel, and I can retire or cancel lessons I believe. But the way the logic currently works is any action the current instructor has access to is shown, from the full list.
- I haven't thought about this and don't really have an opinion on it. Will defer to Joel.
- The "disclaim" action is currently "request", so when a lesson is created you can "request" it which makes it available to claim, and then once it is claimed it can be requested again to be made available to be claimed again. The 2 week unclaim (request) is mentioned in the copy, but isn't actually implemented in the back-end so if someone claims a lesson they currently have it forever (unless they "request" it). Cancel is a complete cancel where the lesson no longer has any actions associated with it and doesn't show up in the egghead-ui screens.
"In order to provide cool adjustments, I'd like to dive more deeply into this and probably suggest more changes than just a new icons for actions and state indicators. Let me know whether that makes sense, maybe I should just focus on what we have currently - which could change rapidly after implementing lesson editing within IC."
I personally would prefer an iterative approach, so for this story that could be starting with the concerns Joel has raised - a) more verbose action information + b) clear icons / call to actions. And then address iteration beyond that as separate issues. The smallest possible delivery / improvement is my favorite size for stories :)
I don't like this page in general, and think it generally needs to be scrapped and rethought. It hasn't had any practical ui/ux planning or design applied. If I'm not mistaken, it is a literal application of this page, except with tabs instead of a long column.
If it is going to continue to exist we can make adjustments so that it has some utility. That's what this issue is meant to address.
We can rethink it completely later.
@joelhooks Can you please give specific actionable things that you would like to see instead? I personally find value from this page - I use it every day to see what is being worked on and what I can help review. But I'm happy to make changes, just need to know what they are.
In https://github.com/eggheadio/egghead-ui/pull/157, I fixed typo "d" so "Approved" is now "Approve". Also switched the check icons to be add "+" icons for now, to avoid the confusion with the new instructor get published checklist.
I hear y'all! 👍
@trevordmiller Here are the lesson icons and states listed separately: https://zpl.io/W4GDR
Mockup for a slightly better context: https://egghead.invisionapp.com/d/main/#/console/10849492/233097984/preview
Regarding row card drawer @joelhooks and I discussed yesterday - shall we create another story for that?
@vojtaholik Awesome! I like your mocks; nice colors, icons (I like the emoji use), and descriptions. Sounds like this would be good next steps:
Step 1
On LessonOverview components, replace the gray lesson state word with the new icons + colors + badges + description pieces from the mocks:
Before:
After:
Step 2
On LessonOverview components, replace the lesson action buttons with the new icons + colors + labels as a bottom bar:
Before:
After:
I could put these action buttons in a collapsible drawer no problem, but I would prefer keeping them expanded without the "+"/"-" option as they are critical to the lesson overview.
Step 3
Update the layout of the instructor to move to the right of the lesson title/state when there is enough room, now that the lesson actions are on bottom:
Before:
After:
This seems ready to be implemented to me. @joelhooks, sound good?
I could put these action buttons in a collapsible drawer no problem, but I would prefer keeping them expanded without the "+"/"-" option as they are critical to the lesson overview.
@trevordmiller Thats sort of why I wasn't sure about this and had done bunch of different variations earlier, like this ➡️ http://cloud.egghead.io/3K363S2B3w2O (I still think this is a decent solution, at least for IC)
A drawer is cool, however doesnt allow direct actions when collapsed, which is important in case of IC. Agree with you on this Trevor.
What do you think @joelhooks ? Would you just leave it expanded in IC? It would lose its magic.
@vojtaholik I could also have the component include a drawer prop, so it could be turned on (hiding by default with dropdown) or off (showing by default with no dropdown) for different situations, which you could pass different actions to. That would probably make the most sense.
I believe I commented on the initial mocks of this; I'm overall okay with the implementation of this.
One more thing to keep in mind, though: some of the actions should convey state. Once a video has already been approved, then you'll either want to remove that as an option or switch it to "unapprove". You'll probably also want to remove "ask for changes" as an option as well.
I'd be curious to see (or create!) the branching logic behind what appears when.
@nickdpi the actions appear based on a "finite state machine" that is implemented on code. Given your current state, you can transition to specific states. So if you are currently in "approved" you will only be presented valid actions (transitions to other states) for "approved"
Ok, I'm moving this to ready to implement and will start on it. Thanks!