Wireframes for Masques v1.0 GUI

[tedstein]

I will produce wireframes of what I think v1.0 should look like, in order for the designers to move forward. Will post here, for feedback, before sending out to designers.

[InvertedVantage]

Here are my notes from our meeting;

1)Pull privacy infringing info only by user choice

2) Identity box shouldn't look like it's editable

3) Add forum functionality?

4) Necessary to have support for a searchable public directory of users, to increase credibility of the project.

5) Customizable QR codes? colors, maybe?

6) Collapsible mini view?

7) Pop up windows? (We decided we want to avoid this if we can)

8) Easy to set up + run - UI study for server installation and configuration.

9) Hash or @ tags for users to call other's attention.

10) Mini window so that the app can minimize but still be accessible?

11) Take notes from FB's interface, to make it familiar for users.

12) GUI tie-in with phone app?

13) Flashing stream icon when you get a notification @ you?

14) @ tag - if you @ tag someone who has a duplicate name, a pop up asks you which one you mean. @macourtney @tedstein - testing Github's implementation. An @ symbol brings a popup near the symbol.

15) Include the ability for users to have a picture avatar.

16) Hammer out "Advanced" section?

17) Multiple identities for login - how does that work?

18) When you launch the program, maybe have an initial login to choose your identity?

19) Keep your local database shared between identities vs. one database per identity.

20) Necessary to explain the difference between usernames vs IDs?

I'm attaching a concept I did (Ted has one too). Each of these panes would expand, and the status thing on the left would constantly be updating. Every time you click an item on the Stream, it would take up the main window in the center.

[tedstein]

[tedstein]

I just noticed twitter does roughly the wireframe above:

[MorrigansRaven]

Maybe we should all find a site/app that we like the layout or look of and work from there?

[macourtney]

The two sites we're already thinking of is Facebook and Twitter. I'm sure we've grabbed some ideas from other sites as well.

[InvertedVantage]

I personally like BuddyPress;

http://ampedstatus.org/network/

is a site that uses it. The content is a bit ehhhhh but the implementation of the plugin is good IMO. :)

On Wed, Jan 30, 2013 at 7:35 PM, Matt Courtney notifications@github.comwrote:

The two sites we're already thinking of is Facebook and Twitter. I'm sure we've grabbed some ideas from other sites as well.

— Reply to this email directly or view it on GitHubhttps://github.com/macourtney/masques/issues/21#issuecomment-12921111.

[tedstein]

What do you like about BuddyPress?

[InvertedVantage]

I like the way groups are easy to create and join into, the integration of both standard group forums and a social network "shout box" (though the shout box tends to dominate so it's worth it to examine how this can be improved). The clean layout is nice and I like the previously mentioned @ tags. But basically, I like how it can be set up to behave like a forum but people have extensive control over their profile in a social network sense; so it'd be like if Facebook was built around user-created groups and forums.

[tedstein]

I am adding the @ tags as an issue in the issue queue. I would think 1.1 or 1.2 though, as it is actually a touch complicated due to people being able to have the same username. Totally do-able though, we just need a list to pop up when there are two users with the same name.

I wrote up a description of the username usability challenge. InvertedVantage, that falls to you...

http://wiki.findmasques.org/doku.php?id=identities_and_destinations#identities_are_not_user_names_and_user_names_are_not_unique

The v 1.0 feature list is here:

https://github.com/macourtney/masques/issues/23#issuecomment-13278963

[tedstein]

Mini didn't make the v1 feature list. It was too crowded. Creating a ticket now.

https://github.com/macourtney/masques/issues/29

[tedstein]

File/Message mgmt. Screen:

File detail screen:

[tedstein]

Revisited GUI design.

[tedstein]

I think files should be renamed to shares. The 'Shares' tab will have the 'File/Message mgmt. Screen' two comments up.

The reason I think it should be renamed, is that there are messages as well as files, and possibly other stuff soon.

[tedstein]

Groups wireframe. Feedback most welcome.

Please note:

1. There will be a sidebar. This is just the main area.
2. We are still in wireframe mode. This is not what the software will look like. But we are getting close.
3. The main area will expand as the window is dragged out.
4. This is a single group. There will also be a searchable list view (from here, you get there by clicking 'Change Group')
5. I am not trying to sneak in text under the icons. I understand we don't want that. The text is just for clarity.

[tedstein]

[tedstein]

@MorrigansRaven, @InvertedVantage : thoughts?

[macourtney]

Items in the stream need dates.

Also, how do you clear a search? What does archive and delete do?

In groups:

How do you add a group? I think it would be easier to use a drop down to change groups.

Otherwise, look good.

[tedstein]

Updated stream:

[tedstein]

I just came up with the idea of archive, based on gmail. Archive simply removes a share from the stream. The share would still be searchable, it just wouldn't appear in the current stream any more. The archive button wouldn't appear for search results. In the data base it would be a flag: I suppose it is a bool or tiny int?

Delete would delete the share and (if applicable) any associated content and content type records.

Your thoughts?

[tedstein]

Revised group wireframes:

[tedstein]

Friends wireframe:

[MorrigansRaven]

Apart from ignoring the decision not to use titles under the icons, it's not to bad. To me, reading the stream is confusing, I understand there will be filtering (as suggested by the 'type' drop down) but I think there needs to be more indication between types of posts and not so much importance on the date/name. I like how it looks as a whole, I guess I'm trying to say I dislike the current look of individual posts. But obviously - just a wire frame for the moment so I'm guessing none of what I have mentioned is solid yet anyway.

[InvertedVantage]

I think the Stream window is confusing, too, and I dislike that we ditched the idea of it being a constant thing; the way it's set up now, it's very "do one operation at a time" and doesn't lend itself to multi-tasking like the previous incarnations did. I think for users trying to actively use the program it will be annoying to have to be switching away from the stream ( where all their data is) to manage little things. It seems like we should keep the Stream constantly on.

I do actually like the color scheme here, even though it is a wireframe. I still like the previous ones more, with the stream on the side, though. I also think that scrolling through that a long list of friends is going to be kind of annoying, but I guess that can't be helped. I'd really lie to do a lot more with this interface, making it more dynamic and interactive - dots connecting to dots on an infinitely scrollable "desktop" for instance, but I guess we're going the simple route.

This also is a good time to bring up my comments here;

https://github.com/macourtney/masques/issues/31#issuecomment-14081297

it would be cool if the Stream was on the right or left side, and when an update was clicked it would replace the center window with the content of that post in a thread format, with an initial post and then following (preferably non-nested) posts afterwards.

I also like the archive function; this could save a copy of the thread to the user's computer as a permanent backup, and could even be set to auto-update.

I know this is all v.1 but I think in a lot of cases we're not really accounting for future add-ins. What I think we should do is plot out a roadmap (graphically, preferably), of feature integrations, allowing us to plan out space in these interfaces for what we want to do in the future. I understand that'll be difficult with everyone's time being so limited, though.

[tedstein]

@InvertedVantage, I will reply soon but the short answer is: yes, we want to include as many of the ideas you suggested as possible.

I failed to emphasize my comments. Let me repeat them:

1. There will be a sidebar. This is just the main area.
2. We are still in wireframe mode. This is not what the software will look like. But we are getting close.
3. The main area will expand as the window is dragged out.
4. I am not trying to sneak in text under the icons. I understand we don't want that. The text is just for clarity.

More tonight.

[tedstein]

Stream will be on the side, unless anyone objects. I think the sidebar is stream + online friends + create new share. Other thoughts on what should be in sidebar?

[tedstein]

I added the sidebar:

• Update status tool
• Stream (click on an item and it fills up the document window, shares with the user tagged are highlighted in some manner -- ideas?).
• Online Friends/Instant Message (start a chat and it opens up a new window?)

I also removed the text from under the icons. I added the name of the screen in purple on the top right of the document window.

I added the user's name + logout button in the top right of the navigation area.

I alternated the color in each row, for tables of data (in this case: shares, online friends, members of a group).

I think I figured out how to make the stream more readable and less confusing.

Click to embiggen:

A purple alternative! Also, too, stream is organized differently (better?).

With a global search:

[tedstein]

I am trying to address all feedback.

@MorrigansRaven

dislike the current look of individual posts

Is this better? What else can be done?

@InvertedVantage

Did I address all your concerns?

Now is a great time to add thoughts on the interface. It will be much harder to make changes once we have coded this stuff.

[InvertedVantage]

Looking good so far. :) Items in the Stream where you are tagged or a message alert should change colors. There should also be a notification which takes you to a list of these items; perhaps a note to the right of the Recent Shares text that you can click.

I also like the color palette of these wireframes, I think with some touch ups you or MOrgan could take these to final.

[MorrigansRaven]

Posts are looking much better. Just wondering about the status post, has a different layout to the others (name and post type are bold rather than next to a title). Not sure what would be done to make this more uniform though, as a status obviously wouldn't have a title

[tedstein]

Thanks.

I added some filters, and a search utility. Header moved around a bit to make room. Thoughts?

@InvertedVantage

Items in the Stream where you are tagged or a message alert should change colors.

Please see second item. Thoughts?

There should also be a notification which takes you to a list of these items; perhaps a note to the right of the Recent Shares text that you can click.

Does the inbox work? I kinda wonder if we need an inbox icon?

@MorrigansRaven

Just wondering about the status post, has a different layout to the others (name and post type are bold rather than next to a title). Not sure what would be done to make this more uniform though, as a status obviously wouldn't have a title.

I don't know either. I suppose the (unsatisfying) answer is that status updates are just kinda different?

[tedstein]

Screen for a new share. New shares are in new windows.

In v2, this will have to be a number of screens (one for forum, one for event, etc..) but I think we can rock this out in v1, given our limited set of initial content types.

If a single file is selected, it defaults to 'File'. If multiple files are selected, it defaults to 'Other File Album', unless it is all mp3s or all photos. The user can always change the type, but it has to make sense (a set of photos can't be a message type, but can include a message body).

If the content is of type [something] album, then the album can be named. Perhaps a new field appears for album name?

The "Share with..." field accepts either usernames or local groups (it searches them as you type). Each friend/local group would be separated by a comma, semi-colon, or just a space. Typing any friend into that field, sets the radio buttons next to it to "selected".

A user can be tagged in the body with the @username convention.

Let me know if anything doesn't make sense. @macourtney you should provide feedback. I think I might have come up with a new concept: default share group. The idea would be that that there is a group that is the default for all new shares.

[tedstein]

First go at profile (the user's, not a friend's).

[macourtney]

I like the design so far, but I have a few questions:

First, what do the icons at the top look like when when something is selected. For example, when the friends screen is displayed what does the friend icon look like?

I'm not sure how the "share with" text area will work. It may be a hassle to have it pop up suggestions. Also, what happens if a group or user name contains our separator character? For example, if we use a comma as a separator, what happens if you have a group name with a comma in it like "Friends, Highschool".

Also, I thought we had another share type. I don't remember what though.

I'm not sure about the default share group. First, it should probably tell you what the default group is in the radio button. How do you set the default share group? Do we default it to one of the initial groups? It may be a bit much for version 1.

Screen requests:

I would like to request a couple of screens.

1. The data directory chooser. I'm currently working on the screen which pops up the first time you run Masques and allows you to choose the directory your data will be saved in. Right now I'm using a standard window, but it would be nice to have one designed. It should have a text field to display the currently chosen directory (starts with a default like "Documents"), a choose button which pops up a directory chooser, a choose button, a cancel button and some text describing what you are choosing.
2. Login screen. I've already implemented a simple login screen, but I'm sure we can make something prettier. It should have a drop down for a user name, a password field, a login button, a cancel button, and a button for creating new users (the create user screen should also be designed.) It should probably have the Masques logo incorporated in it somehow.

[tedstein]

@macourtney

First, what do the icons at the top look like when when something is selected. For example, when the friends screen is displayed what does the friend icon look like?

https://github.com/macourtney/masques/issues/35#issuecomment-14358882

I'm not sure how the "share with" text area will work. It may be a hassle to have it pop up suggestions. Also, what happens if a group or user name contains our separator character? For example, if we use a comma as a separator, what happens if you have a group name with a comma in it like "Friends, Highschool".

Are we going to have a 'Friend Picker' window that pops up? How should we handle this?

I'm not sure about the default share group. First, it should probably tell you what the default group is in the radio button. How do you set the default share group? Do we default it to one of the initial groups? It may be a bit much for version 1.

We can get rid of it for v1. I will create a new ticket for the after v1 milestone.

Screen requests:

On it.

[tedstein]

First go at a login screen.

Thought: If a user does enter an e-mail address in their profile, we could have a 'Forgot your password' function. It does have some security implications, I suppose, but I speak from experience when I say people use those things.

[tedstein]

First go at directory chooser.

[macourtney]

Seems kind of a waste of space to have the masques logo and "Login" on separate lines. Same goes for File Storage.

Otherwise, it looks good.

[tedstein]

How is this? Please note that the text in the logo changes color, depending on if it sits on a light background or a dark background.

[tedstein]

Just so people know, I am starting the migration from this ticket to the wiki:

http://wiki.findmasques.org/doku.php?id=wireframes_specs

[macourtney]

The new login and file storage screens look good to me. If no one else objects, I'll start implementing them.

[tedstein]

@macourtney Sounds good. Do you need any graphic assets or anything from me?

Stream:

[macourtney]

@tedstein I think I have everything I need. If not, I'll let you know.

[tedstein]

@macourtney Cool. Please don't use that logo from the screenshot though. It is not scaled properly. Please use these.

For dark backgrounds:

For light backgrounds:

[tedstein]

Closing this. We can have specific issues for design as needed.