mozilla / openbadges-backpack

Mozilla Open Badges Backpack
https://backpack.openbadges.org/
Other
862 stars 263 forks source link

Design Feedback #893

Closed thisandagain closed 10 years ago

thisandagain commented 11 years ago

As I have been working through an Open Badges integration, I've found myself sketching out a few thoughts and questions in regards to the user experience for the backpack. I hastily threw them into a few wireframes this eve for discussion purposes. So sorry if these are items which have already been covered. Also, as this is completely unsolicited design feedback, please feel free to blow up if unwanted. :boom:

Information Hierarchy In the existing implementation it seems that the information hierarchy could use some refinement. Namely there are a number of instances where data is being "listed out" rather than integrated into something which has a meaningful context. A concrete example of this are the badge modal and sharing views:

screen shot 2013-07-24 at 10 09 28 pm

Redundant Path The backpack is wonderful in it's thrift, but the redundant path for uploading a badge to your backpack could be eliminated. Two buttons which look nothing alike, but perform the same action can be confusing. In the case of the upload functionality, both buttons also link to a separate view which requires yet another click to prompt the system file picker. This path could be consolidated down to a single element which prompts the system file picker or affords drag-and-drop.

screen shot 2013-07-24 at 10 12 24 pm

Conflation The three secondary navigation elements in the backpack view provide two different types of behaviors but are presented together as to suggest a "set" of functionality. The first two ("Recent" and "Everything") are sorting mechanisms which are visually disconnected from the dataset that they affect, while the third changes the user's context completely:

screen shot 2013-07-24 at 10 22 16 pm

Sketches Based on these items I quickly converted a few sketches into wireframes. I didn't attempt to dive into the "Collection" or "Share" views as I had too many questions (listed below), but hopefully these help illustrate my opinions:

obi_splash_02_000

obi_splash_02_001

obi_splash_02_002

obi_splash_02_003

obi_splash_02_grid

Questions

threeqube commented 11 years ago

Hey @thisandagain, thanks so much for this. The team has been at badge camp all week so we are slowly digging out and catching up. Let us go through this and get back to you. We are cognizant of the fact that the current user experience can be improved and made more intuitive. We are also planning on having it align with the brand as you have done in your wireframes.

These are great, thoughtful points.

thisandagain commented 11 years ago

Hey Sunny @threeqube ! Hope you folks had a great time at camp! No rush at all... you are all so thoughtful I'm sure you are on top of it. I found myself with a sketchbook full of notes and figured I would share.

stenington commented 11 years ago

@thisandagain Oh man, it's like you channeled the spirit of the Backpack discussion over the last many months! I think a lot of your suggestions are spot on and your questions are ones we're asking ourselves as well.

The information hierarchy problem is something I've been thinking about as well. I think the initial use case was just "show people their badges actually carry metadata", so a list was okay for that. But in terms of real day-to-day usefulness, I agree there's room for improvement and we need to think more specifically about what different types of users want to do with the information available. Really this is something we're grappling with inside of the backpack and outside of it, through the Displayer API.

The redundant path and nav conflation I think are the products of rushing to a deadline. :/ Last week we talked a lot about a plan to start work an v1.1, essentially, which would include taking the time to clean those sorts of rough edges up.

Your wireframes also hint at something we learned working on mozilla/CSOL-site—search trumps filters. We absolutely need to work search into the Backpack, preferably with support for search operators like name:, issuer:, earned_after:, etc.

The median number of badges per active user is... unknown. We could dig around and find out, I think, but this also points to something we want to build in to v1.1: metrics!

The primary use case for collections, I think, was to demonstrate how the Backpack can consolidate badges from multiple issuers into something useful. Like the information hierarchy, I think initially it was a demo piece more so than derived from something users wanted. We're finding that users do want sharing, but maybe more at the single badge level rather than through collections. I think ultimately collections might get dropped from the Backpack in favor of a much better "resume 2.0" type product that uses the Displayer API.

Uploading a baked badge is sort of a nod to the paranoid among us. :) I think it's important that people realize they don't have to use the Backpack or the Issuer API to take their data with them—saving a baked badge to their hard drive will work just as well. It's a feature that's not likely going to get a lot of use, but it means the world to those who care about that sort of thing. That said, it would probably be fine to de-emphasize that feature in the UI.

stenington commented 11 years ago

I should also say: It's super rewarding to me to see you identifying these problems and thinking through the same sorts of questions we're asking ourselves. Your unsolicited feedback is totally welcome. It makes me feel like we're on the right track.

threeqube commented 11 years ago

cc/ @iamjessklein and @mgballard to make sure they have a look at @thisandagain's feedback and questions.

thisandagain commented 11 years ago

@stenington

Re: Search. Depending on the median # of badges, I'm thinking that search could be kept client-side as to not make the stack any more complex (particularly if federation is on the horizon). Something like lunr.js could work well.

Re: Median # of badges per user.

SELECT user.id, count(badge.id) as count FROM badge JOIN user ON user.id = badge.user_id GROUP BY user.id

--> Open Office median function

Re: Collections. Happy to hear that we are on the same page. I have more thoughts on this particular issue, but I'm not sure if Github is the best place to present them.

Re: Baked badge uploader. LOL.... totally understand. :smile:

emgollie commented 11 years ago

@thisandagain, thanks for this. Can I come to the clubhouse soon and ask you a few questions that @brianloveswords, @iamjessklein and I are thinking about? Will bring fun gifts for you and Diane.

Also, to follow up on @stenington's thoughts about collections, I would say that the use cases have been a) badge organization to make sense of the contents of a personal backpack, even for people who chose not to share their badges, and b) creation of personally meaningful groups of badges to display or share (a la academic achievements, professional accomplishments, and personal interest badges). Agree with @stenington that the current flow may be re-thought by our summer interns working on "resume 2.0" designs. Excited to discuss further.

thisandagain commented 11 years ago

@emgollie Sure... you folks are always welcome at DIY HQ. Just drop me a note offline and we can set something up.

threeqube commented 10 years ago

Closing this for now.