HabitRPG / habitica

A habit tracker app which treats your goals like a Role Playing Game.
https://habitica.com
Other
11.8k stars 4.06k forks source link

[Suggestion] Interface Suggestion #2 #262

Closed abednego closed 11 years ago

abednego commented 11 years ago

OK, so now that we've fixed the top of the page to the little dude, I just feel like the whole thing takes up too much space and we can optimize it a bit.

A couple of points first. I don't know how other people feel about it, but when I'm looking at one list, I'm just looking at one list. I don't need to see every list all the time when I'm looking at the page. Thus, I think a more compact design could be created and more utility could be packed into a smaller interface.

I'm no computer artist, so I had to draw this, then scan it in, then use the snippet tool. Yes, I'm a n00b:

(and yes, I forgot to label the "Experience" bar underneath the "Health" bar, oops)

interface

A short description of the interface:

At the top you'd have your little dude with the health bar and experience bar. On the far right, I didn't indicate it, but you could put a spot for an advertisement so you could make a few bucks or something. ;)

On the left you'd have a tab control where you could pick "Habits", "Daily", "To-Do's", or "Rewards" (I left rewards off). Within that control you can click a checkbox, or create new items. You should also be able to sort by color, due date, alphabetical, numerical, or what have you.

Under "Detail", you'd have information pertaining to the item you selected on the left control. So if you clicked on/selected an item from your "Habits" list, you would see the History for that item. When it was created, a graph of progress, when the last time was you completed it, etc.

Under "History", I'm thinking the overall history of your progress. Every time you gain experience, buy an item, spend money, created a "Habit" or "To-Do" or whatever, got hurt by something (and what it was that hurt you, of course) that would go into a scrollable list with links to things where appropriate. So if I created a new "Habit" item "Take your vitamins". It would appear in the "History" list with the date I created it, and a link to take me to the "Habit" control and display the "Detail" on that item with regards to the History of every time I clicked on "Take your vitamins".

(When I refer to "Date", I mean "Date and Time". Very important in this application, I think.)

Anyway, those are my current thoughts on the interface. Maybe I'll draw it up in Visio or something to make it a bit prettier but for now I thought just a simple drawing would be quicker.

What do you guys think? Bad idea? Hard/Impossible to do?

Thanks,

-abe

ghost commented 11 years ago

Too cluttered and the design feels rather natural the way it is now. On Jan 29, 2013 3:53 PM, "abednego" notifications@github.com wrote:

OK, so now that we've fixed the top of the page to the little dude, I just feel like the whole thing takes up too much space and we can optimize it a bit.

A couple of points first. I don't know how other people feel about it, but when I'm looking at one list, I'm just looking at one list. I don't need to see every list all the time when I'm looking at the page. Thus, I think a more compact design could be created and more utility could be packed into a smaller interface.

I'm no computer artist, so I had to draw this, then scan it in, then use the snippet tool. Yes, I'm a n00b:

[image: interface]https://f.cloud.github.com/assets/3382838/108814/4236923a-6a5d-11e2-8ab5-d3e03d901b53.png

A short description of the interface:

At the top you'd have your little dude with the health bar and experience bar. On the far right, I didn't indicate it, but you could put a spot for an advertisement so you could make a few bucks or something. ;)

On the left you'd have a tab control where you could pick "Habits", "Daily", "To-Do's", or "Rewards" (I left rewards off). Within that control you can click a checkbox, or create new items. You should also be able to sort by color, due date, alphabetical, numerical, or what have you.

Under "Detail", you'd have information pertaining to the item you selected on the left control. So if you clicked on/selected an item from your "Habits" list, you would see the History for that item. When it was created, a graph of progress, when the last time was you completed it, etc.

Under "History", I'm thinking the overall history of your progress. Every time you gain experience, buy an item, spend money, created a "Habit" or "To-Do" or whatever, that would go into a scrollable list with links to things where appropriate. So if I created a new "Habit" item "Take your vitamins". It would appear in the "History" list with the date I created it, and a link to take me to the "Habit" control and display the "Detail" on that item with regards to the History of every time I clicked on "Take your vitamins".

(When I refer to "Date", I mean "Date and Time". Very important in this application, I think.)

Anyway, those are my current thoughts on the interface. Maybe I'll draw it up in Visio or something to make it a bit prettier but for now I thought just a simple drawing would be quicker.

What do you guys think? Bad idea? Hard/Impossible to do?

Thanks,

-abe

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262.

abednego commented 11 years ago

I understand. Obviously this is a starting suggestion and could be improved upon greatly. More space for the tab control area and less for others, etc.

Unfortunately, the current design takes up the entire screen horizontally, and with the header being fixed the vertical space required has expanded. Some optimization needs to take place and this could be a starting point for the discussion, at least. There's very little information given to the user to track the history of completed items as well as display more information about progress other than "Experience". Furthermore, if we start adding group collaboration into the mix, where are others' activities going to go with the current interface? There's no room for another column to let you know that "Person-2 Completed XYZ Activity". That could go in the tab control, or History, but it needs to go somewhere.

Anyway, like I said, just a suggestion. :)

StanLindsey commented 11 years ago

Firstly, its most definitely not a bad or impossible idea. Thanks so much for taking the time to bring out paper and pencil and get stuck in with what you view as design problems - its fantastic that we have people who want to give that amount of input.

Firstly this is very much on a per-person base. I love the fact that I can see everything from one view and use the current view to remind or suggest to me things I should be doing. Due to me using the current view predominantly a set of reminders I don't need any extra detail - especially for Habits & Dailys which will either explain themselves due to simplicity or I will get better at remember what they are.

Others should chime on this with how they use HabitRPG because if they feel it takes too long to get information or doesn't offer the affordances they desire then things can be improved.

abednego commented 11 years ago

Thanks Slappy. ;)

Could be a starting point for a mobile app too. If most folks are happy with the way it is now, that's cool and the gang. :dancers:

abednego commented 11 years ago

Shoot, I was hoping the dancers would move. :(

StanLindsey commented 11 years ago

I think there will be many discussions about design and layout as more functionality is added, at the current time there is a small taste of the functionality possible (just take a look at Trello for what people want)

Personally I think tabbed views could work well. Also I am working on optimizing the static header, especially for mobile. On a desktop it works well but it can always been improved - screen real-estate is important.

Also lol @ dancers =P

ghost commented 11 years ago

@abednego didn't mean to sound rude but for the time being I just think the current design is best but I am rather biased towards it. Though I do see your idea as totally viable post V1.0. After bugs have been squashed, kickstarter campaign is successful, and +100K users. Tell me though would you make this new design the default or an option? On Jan 29, 2013 4:06 PM, "abednego" notifications@github.com wrote:

Thanks Slappy. ;)

Could be a starting point for a mobile app too. If most folks are happy with the way it is now, that's cool and the gang. [image: :dancers:]

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262#issuecomment-12861122.

abednego commented 11 years ago

You didn't sound rude, Neo. I'm an engineer, so I'm used to short responses. :)

To answer your question, if the program is successful I wouldn't change what's working.

My personal preference is towards compact and (what I believe is) efficient design. Each column I have stretches past the bottom of the screen, and if I want to return to the top of the next list I have to scroll all the way back up. I don't generally take all three columns in or notice colors in all three. I focus on one at a time. With the tab control I don't have to scroll to get to the next list, especially if the list is sorted from the top down. And being an engineer, I love graphs and data that show me information. I don't want to have to dig too much to get that info.

One of the things I think has been mentioned is knowing if a Habit has been completed on a given day, and perhaps how many times. How many clicks will it take to get to that information? If you want to see or edit the note, see the history, and see the graph, that's three clicks on a Habit. If there's some space on the screen, with the suggestion above, you just have to click once to see that sort of information, and you can click anywhere on the Habit and not just in a certain area.

I type a lot. Sorry. :)

lefnire commented 11 years ago

i was originally planning tags to include columns, something like http://gyazo.com/a50884fafa9086b1feaddf5262173803 - so you can toggle column displays

ghost commented 11 years ago

Brilliant On Jan 29, 2013 4:52 PM, "Tyler Renelle" notifications@github.com wrote:

i was originally planning tags to include columns, something like http://gyazo.com/a50884fafa9086b1feaddf5262173803 - so you can toggle column displays

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262#issuecomment-12863456.

wc8 commented 11 years ago

One thing I really, really like about HabitRPG is the 4 columns that let me see everything I might have to do at once —well, almost. As the lists get longer, I have to scroll more. I'd be fine with less padding around the individual items, but I'd be disappointed if the ability to see the four columns of item types at once was lost.

ghost commented 11 years ago

@wc8 I love that about habitrpg's design most of all

On Tue, Jan 29, 2013 at 6:16 PM, wc8 notifications@github.com wrote:

One thing I really, really like about HabitRPG is the 4 columns that let me see everything I might have to do at once —well, almost. As the lists get longer, I have to scroll more. I'd be fine with less padding, around the individual items, but I'd be disappointed if the ability to see the four columns of item types at once was lost.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262#issuecomment-12866773.

wc8 commented 11 years ago

Just to clarify: I probably wouldn't mind if an extended graph temporarily hid one or more of the other columns, but I would want my default view to show all the columns.

StanLindsey commented 11 years ago

I order my Todos by priority and Dailys by time in the day I am expected to do them. In theory I only have to look at the top of the page or scroll for the dailys. There are definitely ways it can be improved and I'm taking them into consideration whilst I'm putting together a large possible design document for a future UI design of HabitRPG.

abednego commented 11 years ago

Slappy, how do you order things?

ghost commented 11 years ago

I order things alphabetically usually but sometimes I order them by importance.Anyone else think the shades need a color change. On Jan 30, 2013 11:48 AM, "abednego" notifications@github.com wrote:

Slappy, how do you order things?

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262#issuecomment-12902429.

abednego commented 11 years ago

But how do you order them? I mean, you typed them in alphabetically, or you sorted them after you typed them in? I'm afraid I don't see a way to sort or order things.

ghost commented 11 years ago

Ordered them alphabetically after I typed them in. On Jan 30, 2013 12:12 PM, "abednego" notifications@github.com wrote:

But how do you order them? I mean, you typed them in alphabetically, or you sorted them after you typed them in? I'm afraid I don't see a way to sort or order things.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262#issuecomment-12903679.

StanLindsey commented 11 years ago

Habits I organise by type, so ones which go up&down are first, then just ups, then just downs.

My Dailys are organised by time in the day I'm most likely to do them. So in my dailys "Wake up by 7am" is the first thing on the list and "Floss teeth before sleepytime" is last on the list.

To-dos are most important and urgent first.

Nelmalih0 commented 11 years ago

I think you should make a sort of Windows 8 scrolling thing (the mouse wheel scrolls side to side) and you would have more than 4 columns (according to column categories), and be able to add new columns (and it would ask you if you want the column to be a Habit, Daily, Todo, or Reward column)

abednego commented 11 years ago

Oh holy crud I forgot you can drag and drop the stupid things. (And by "stupid things" I mean "I'm stupid".)

/smacks forehead

Pandoro commented 11 years ago

Another wild idea relating to this topic. Think of the way tabgroups (are or were?) realized in firefox. There you can drag around groups over the screen and resize them. In order to not make it all so messy I would limit the thing to four columns. Then in each column you can set a "block" of a certain length. And for each block you can again scroll within this block. This also easily scales to the mobile app as the blocks can simply be put below each other.

At first I thought having more columns was a little unnecessary, however today I noticed I would love to have one todo list for today and one for some todos scheduled for later on. In this case it of course would be great if you could drag and drop between "blocks". Other use cases could be something like habits for the morning routine and for the evening. Or dailies for private and work stuff. But considering you have been discussing this thing like mad, I guess you already came up with these things ;)

wc8 commented 11 years ago

Here's a potentially complicated idea for the interface: Integrated Daily-Todo View with drag & drop ordering system.

Use case: I, like @SlappyBag arrange my daily's by the order in which I do them. It might be nice to be able to put intersect some of the todos I hope to complete in between.

For Example:

StanLindsey commented 11 years ago

Heres my dailys at the moment; dailys2 (90% of them are only active Monday to Friday and today is Sunday, thats why they are all grey and I look unproductive)

So I have morning & afternoon productivity which I use as blockout time to do todos or work on projects (e.g. HabitRPG, university work, freelance contracts, personal projects etc). I've also blocked most of them out by time in order that I know what I should be doing at any point of the day.

Also the ones with notes are different depending on the day e.g. dailys3 I do that so my dailys list isn't huge. (If there were hidden dailys later on that would allow me to use that instead of combining dailys into one "card" so to speak.

Its interesting to see how others use HabitRPG.

lefnire commented 11 years ago

Tags is going to clean up the interface substantially. think @work @home @morning @evening

On Sun, Feb 3, 2013 at 2:45 PM, Stan Lindsey notifications@github.comwrote:

Heres my dailys at the moment; [image: dailys2]https://f.cloud.github.com/assets/3317882/122189/eee3bf5a-6e39-11e2-8f01-0b3759ab6f4e.jpg (90% of them are only active Monday to Friday and today is Sunday, thats why they are all grey and I look unproductive)

So I have morning & afternoon productivity which I use as blockout time to do todos or work on projects (e.g. HabitRPG, university work, freelance contracts, personal projects etc). I've also blocked most of them out by time in order that I know what I should be doing at any point of the day.

Its interesting to see how others use HabitRPG.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/262#issuecomment-13052528.

wc8 commented 11 years ago

@SlappyBag Thanks for sharing that image. @lefnire I'm looking forward to tags. Will users be able to filter by tags?

horusofoz commented 11 years ago

Please continue discussion under GitHub 361.