Interface Style & Aesthetics

[caycefischer]

This is an open topic I'd like to start to just discuss the visual evolution of HabitRPG.

Obviously, at this point it's still early in development, and very much reliant on Twitter Bootstrap for UI and overall aesthetics. That's been the right move thus far. But if Tyler gets backed (fingers crossed!), HabitRPG is going to hit primetime and will have to evolve beyond what Bootstrap provides. My girlfriend, upon seeing the app for the first time, told me “it looks kinda like a barebones Twitter”. With such great work coming out of the pixel artists, I've started thinking about how, as a user and a designer, I'd like to see the interface catch up with the art.

I imagine there might be three different directions the UI aesthetics might go:

1. Kinda retro looking like the UI of an older video game, referencing the pixel art very heavily. Think Zelda, Pokemon, BrowserQuest. (1, 2, 3)
2. Fantasy-inspired, using renaissance-era typography, fantasy tropes and effects. Think Lord of the Rings, Diablo, Baldur's Gate.(1, 2, 3)
3. Try to reconcile a clean, modern UI with the pixel art. This would be a combined style using clean lines, contemporary typography and "authentically digital" interface elements. Probably the hardest to pull off, but maybe the most unique and interesting.

Does anyone have thoughts?

[ghost]

@zakkain 1) We are using brower quest graphics actually. 2) What exactly about them do you want to add to habitrpg? 3) How?

[caycefischer]

That's why I brought up BrowserQuest, I know we're using a lot of assets from that project already. As for the second direction, I was thinking about something with more fidelity then the boxy, exaggerated pixellation of BQ, like how those games use high-res fonts and textures to imitate ancient scrolls, and other real-world interfaces.

As for that last direction? I'm not entirely sure yet, I think it would take some experimentation. On Feb 9, 2013 7:54 PM, "Wesley Pennock" notifications@github.com wrote:

@zakkain https://github.com/zakkain 1) We are using brower quest graphics actually 2) What exactly about them 3) Again how?

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

[ghost]

1) Hmm I think that would be interesting if it turned into a mini browser quest 2) The point of those graphics is to add an old school gaming feel though 3) White background and clean black lines

[caycefischer]

2) Well, I'd argue there's a difference between the pixel graphics of old and the cinema-style realism of games like Baldur's Gate. But it's all on a continuum, the new evolved from the old obviously. It's mostly a matter of taste.

1, 3) I agree, I think the most natural progression to a pixel-art style of interface. But I wonder if that might be gimmicky or bordering on cliché. It would also be very asset-heavy, lots of art to be created, and have running in the app. Personally, I think some compelling design can come from the third direction, a fusion of retro and modern aesthetics.

I'd really like to hear what @lefnire, and of course the user base at large, think of the app's design.

[StanLindsey]

From discussions behind the scenes and in my amateur designer brain I'd be pushing towards option 3. Even though it may be a retro style game it still is still a modern concept (using some beta backend software =O) and should conform to modern standards.

I'd say that the modern "metro" style is much easier to create in terms on content (e.g. less pixel art) as well as has a much better ability to direct attention and focus the user by not looking cluttered and utilising modern design techniques .

Mixing this modern style with pixel art is the best approach in my opinion and currently the style we are closest to at the moment. I think turning individual UI elements into 8bit style pixel art but leaving the bacground/div stylings to be modern might work. E.g. checkboxes, submit buttons etc looking more retro. This would also easily focus the user on those areas due to the juxtaposition of those elements.

Great topic @zakkain.

[horusofoz]

A mixed style sounds good but I hope we'll keep things minimalist though. We want busy users, not a busy UI.

How about some mock ups?

[StanLindsey]

Yeah thats my point of view and most modern design is all about minimalism so I think it'll work.

[lefnire]

I personally prefer simple UI, with graphics for the necessities. Habbit, Mindbloom, and many other similar apps have their entire interface "in character" (as what is being suggested) and it seems too busy and distracting to me. Eventually we'll want professional UX / UI advice, because everyone is having different opinions here. Zack, I know you do this professionally - so we should definitely take into consideration your recommendations.

As Stan suggested, I think a "best of both worlds" would be a toggleable background. Start with the simple UI so as not to distract the user, then in settings they can toggle "background". Also, I think we should go all retro, especially because - as Zack mentioned - we have a ton of BQ assets to work with from their repository, especially now that we're considering backgrounds. We can just whole-sale user their taverns, forests, rivers, etc.

[Hermione333]

3, 3 and 3. No tacky skeuomorphisms. Also no gender roles (no separation of quests, rewards, avatar add-ons etc. between men and women). Thank you for your work :-)

[caycefischer]

Interesting that you bring up the gender issue, I grappled with that a bit even for the customization window. I was going to add labels to the options, but was reluctant to name the choices "male" and "female", and rather kept them simply aesthetic: short hair & long hair.

In every choice we should remain mindful :) On Feb 10, 2013 2:51 PM, "Hermione333" notifications@github.com wrote:

3, 3 and 3. No tacky skeuomorphisms. Also no gender roles (no separation of quests, rewards, avatar add-ons etc. between men and women). Thank you for your work :-)

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

[lefnire]

yeah, i noticed you removed the labels and i was glad you did. someone mentioned previously not liking the terms "male" and "female"

[caycefischer]

Same with skin tone. Variable names are fine, but it feels weird telling people their skin tone is "Asian" or " white". What a minefield! On Feb 10, 2013 3:38 PM, "Tyler Renelle" notifications@github.com wrote:

yeah, i noticed you removed the labels and i was glad you did. someone mentioned previously not liking the terms "male" and "female"

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

[lefnire]

Seriously. I kinda want people to know that green means orc and blue means undead, but wanted to avoid confrontation with the other tons - maybe call it "lighter light dark"? Ugh, the eggshells we walk on these days.

[StanLindsey]

Maybe this ties into "races" but having gender specifically not mentioned. Depending on your race though you get different skin colours. E.g. Orcs are the only one with green skin available.

[caycefischer]

That's a cool thought—allow people to explicitly choose their race and provide a range of tones based on that.

We could cut down on spriting too with a dash of js/css magic to create a wider range of shades and tones On Feb 10, 2013 3:43 PM, "Stan Lindsey" notifications@github.com wrote:

Maybe this ties into "races" but having gender specifically not mentioned. Depending on your race though you get different skin colours. E.g. Orcs are the only one with green skin available.

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

[Hermione333]

I was an avid player of the sims, and I think they got it right in terms of allowing the user to select a species, especially in the sims 3: you have human with all color variations in which humans come from, and then alien, werewolf, fairy etc. For sex differentiation I really think it is unnecessary unless the avatar graphics become much more detailed, in which case there may be a need for hinted sexual attributes, specifically breasts. But I think you have done a great job by simply giving hair style choices, and anyone may choose what they want. What I do not want to see is separation of behavior and interaction according to gender.

[lefnire]

no, there definitely won't be any separate gameplay based on gender

[orangisque]

I like the idea of mixing elements from the 8-bit/16-bit like pixel art graphics with a flat-ish underlying structure. I think you can add a lot of the charm without pixelizing all the UI, with things like pixelly typography and choice of flat icons for the smaller stuff.

Did a little bit of a quick mockup here to show, since I like pictures. (By no means polished or anything...but to give an idea of what I'm illustrating towards)

I like the modular idea, lots of older RPG status screens are dialogue boxes galore (like this FF6 modular screen and Tales of Phantasia menu screen), so you can harken back to the RPG element, and it gives more flexibility for content organization. (Without all the features, however, it is hard to really say what's best and what isn't so for now I kept with what is available.) The smaller icons have the pixel look along with some headlines to match the art better but body text stays the same...so it won't be an eyesore. And a small graphic with a background on the top left to spice things up and add some visual interest :).

For details: One thing I am thinking though is the incorporation of the colour coding for the habits/todos/dailies. I know it's an important part of the game but it can add a bit of noise to the whole design. Can try banding instead of full backgrounds.

Like this:

But hey, that's details that can be sweat over later.

[caycefischer]

Wow, out of nowhere @orangisque ! There's some really good ideas and structure in there! We've been discussing it in the live Hangout. Thanks!

[orangisque]

Hope they are useful for you guys! I'm open for more discussion about this so if you want to bounce any ideas just give me a shout :).

[Pandoro]

@orangisque yesterday I made a little color change to your mock up. It wasn't all that great though. Most of the people in the KS celebration hangout agreed though that the new colors for the different tasks was rather, distracting. My edits to your mock-up made the point pretty clear that with the original colors your mock-up has a very different impact. Because of that it would be great if you could make create something with the current colors for tasks and dailies etc. That would really be cool, to judge it in a little more neutral way.

It looks pretty cool, but some issues we notices yesterday would for example be the party. Where would that fit into your mock-up? Any thoughts on that :) ?

[orangisque]

@Pandoro Ahh, hehe, sorry for the eyesore colours, I usually work with a really dim monitor so I don't really see the full vibrancy of the colours I pick. Here's the first mock up with the colours done to the existing palette. Although, they do seem a bit paler than it is on the actual site, even though I took the hex values exactly. Most likely an Illustrator thing plus the lack of darker outline to go around the items for the visual effect.

Going back to my other task list experiments, here's the full extent of what it can be.

Also, embarrassingly enough I don't seem to see the party function on my end (not unlocked it yet?) so I completely missed that part. But, this is one way of doing it.

For that menu bar, I am thinking more of a click to switch tabs over a hovering thing. I figured we can save some screen space by shrinking the life and EXP bars because they do take up lots of space. Now the argument can be had that it gives a grand effect of seeing it that long. No real objections there other than it does take up a lot of unnecessary space.

Only caveat here, probably seen very clearly, is the limited number of menu items. Size can be shrunk down but at a certain point it may be a problem. A way around it is to have the most important links out and then turning one of those items into an "Other" and having the rest of the menu appear.

Play around with another arrangement of the task items and menus:

This one I bumped up the colours' vibrancy to try it out, it doesn't hurt too much since the colours are smaller bands instead of large areas. Rearranging the top left area to be more like a game screen almost. The menu here is now tabs with icons so you can fit more items on the tabs. At a certain point of course, you run into the same problem as the mockup above of having more items, but I don't know if there would be that many items you want to display all at once for the user. Another inconvenience here is having to make the icons...but I'm sure someone can do this ;).

SUPEREDIT: For this one option, I put the user names underneath the party too, but as you can see with Awesomesparklesauce, name length might be an issue. Limits?

Also thinking mobile/small screens in mind, the icons does help save space. Rearranged, it can be like this, and the menu items pop up on click.

Of course, there are a ton of details to be worked out (iOS and Android design requirements, anyone?) and I should brush up on the full feature set (or maybe someone can outline?) that the game will have, it will really help inform the design.

Sorry if I seem totally spammy and spewing stuff, this project is super exciting and since I'm not that up to snuff with all the coding, but I figured I can contribute through design. :)

[caycefischer]

Hooooly! There's a lot to dive into here, you're awesome Joanna!

@lefnire you weren't sold yesterday on the mockup, but take another look now at how the layout might accomodate the party system and retain a clean, whitespace-healthy layout. I'm really digging the modular "dashboard" style, and I'm warming up to the idea of a backdrop behind the avatar area.

@orangisque, my gut inclination is that a layout similar to that second image (with the menu and party) would work really well for the right-hand side of the screen, but reworking the left-hand side of it to get the health/XP bars more tied to the avatar again (closer to what we have now). And that mobile mockup is looking gooood!

[toebu]

Sweet, I really like the last version (with more space for the party and the avatar. Also, I like the task colours better with the narrow strip on the side than on top. It's clearer that way with which task the colour goes.

[StanLindsey]

As an upgrade on the current style, I'm starting to quite dig this. We'll have to discuss some of the upcoming features such as where the town crier would stand but I think many of the menu options would work the way you've envisioned and you could still possibly fit more icons in there.

I'm off to bed but heres some quick input from my end; In the first image I've moved the "menu" bar in line with the HP&EXP bar. It does remove some of the vertical asymmetricness but its mostly so a static header like the one in the second image could scroll down with the window without taking up any room. If you click on a menu button it brings the window back to the top with the "party" area replaced with whatever that menu is.

Just my quick 2 cents, off to bed now! Comments?

Relocate Menu;

Header;

[wc8]

@orangisque any ideas for putting available coins in the header? There have been at least a few requests for that.

[lefnire]

I'm starting to like it the more it fleshes out. Stan's latest spin I like the most (obviously majority credit to @orangisque). I'm realizing that my aversion to it may have been my RPG style from growing up, I've never played those compartmentalized RPGs that y'all are talking about, though I know the sort - I played more fluid ones like Secret of Mana, which semi-directed my hand. Obviously if either versions (yours or mine) are chosen, they'll evolved - but maybe we should have a vote on which one people would prefer as the design "base" - maybe a Trello temporary single column with two cards.

[caycefischer]

I think that's a good idea. Once we as a group decide the gist of it, we can work on making it as awesome as possible without getting sidetracked or second-guessing On Feb 18, 2013 6:53 PM, "Tyler Renelle" notifications@github.com wrote:

I'm starting to like it the more it fleshes out. Stan's latest spin I like the most (obviously majority credit to @orangisquehttps://github.com/orangisque). I'm realizing that my aversion to it may have been my RPG style from growing up, I've never played those compartmentalized RPGs that y'all are talking about, though I know the sort - I played more fluid ones like Secret of Mana, which semi-directed my hand. Obviously if either versions (yours or mine) are chosen, they'll evolved - but maybe we should have a vote on which one people would prefer as the design "base" - maybe a Trello temporary single column with two cards.

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

[orangisque]

@SlappyBag Oh, floating header is a great idea! Especially if people have piled up the to-do's. Would help with mobile site when people are scrolled down.

I do think more exploration is merited, as this is just something I threw together over the span of 2 days. Another concept (or 2, if time permits!) to see the breath would be great. Even if it is a crude wireframe of sorts would give people an idea as to how it would look. (Text is nice and all but hard to judge unless it's done! ...At least for me.)

Now that @lefnire mentioned Secret of Mana, gives me an idea...

[caycefischer]

Absolutely, I'm treating these as wires and exploratory mockups.

On the point of floating headers, we had a floating header initially on the site, and it created a lot of problems for mobile users because it was too tall and covered most of the screen—and since it floated, you couldn't scroll past it! I think it works great for desktop, but on narrow, portrait screens we could design a scrollable/tabbed sort of thing (think the Facebook app, but the slide-out panel has your avatar and info maybe?)

On Mon, Feb 18, 2013 at 7:11 PM, Joanna notifications@github.com wrote:

@SlappyBag https://github.com/SlappyBag Oh, floating header is a great idea! Especially if people have piled up the to-do's. Would help with mobile site when people are scrolled down.

I do think more exploration is merited, as this is just something I threw together over the span of 2 days. Another concept (or 2, if time permits!) to see the breath would be great. Even if it is a crude wireframe of sorts would give people an idea as to how it would look. (Text is nice and all but hard to judge unless it's done! ...At least for me.)

Now that @lefnire https://github.com/lefnire mentioned Secret of Mana, gives me an idea...

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

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

[lefnire]

@orangisque are you Joanna the Logo Designer??

[orangisque]

@lefnire Yes :) Took your offer and dropped by Github to say "Hi!"

[ghost]

@orangisque your awesome sauce thanks for the logo I love it

[lefnire]

Yeah, your logos seriously rocked

On Mon, Feb 18, 2013 at 8:00 PM, Wesley Pennock notifications@github.comwrote:

@orangisque https://github.com/orangisque your awesome sauce thanks for the logo I love it

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

[orangisque]

Thank you! Very happy about the positive feedback on the logo.

Okay, here hoping I interpreted this correctly. Onwards!

So instead of big blocks at the top...it's smaller blocks. Basic info about your character and the party you are in. I thought about adding the life and/or EXP bar of your party members but space. (edit: Read more carefully and seems like party limit is 5!) Also need to make room for mounds, pets, etc so I'm guessing the sprite area is actually bigger than shown. Also incorporated coin count to the top as suggested.

Experimenting with removing the Rewards column. My understanding is that there's going to be shops implemented in the future which pretty much takes the place of the rewards column? HOWEVER, what of personal rewards? Maybe it should stick around afterall?

I hope this goes for the more floating style that was mentioned. There is the challenge that the lists are essentially big blocks. There is the option of toggling between lists, but I think people like seeing them all on a page, especially on the desktop? Getting rid of the background on the lists does open it up more. I considered having the header bar in white too but that ended up look too empty.

Menu is hidden as a single icon and toggle as needed. This gets rid of some visual clutter right on the get go.

As you scroll, your stuff stays with you, like a good old HP bar in a game. As @zakkain said though, this may not be good for mobile, will have to think of other options (like just your own HP/EXP bar + menu icon sticks).

Popup boxes for content?

And for a nicer RPG feel, an option to toggle a background.

[ghost]

@orangisque correct me if I am wrong but you click that thing top right to open the shop correct? If so why not make it say "ye old shope" or something?

[caycefischer]

Splitting the Rewards/Shop off to a modal window is a really good idea. Keeps the main area specifically for productivity.

On Mon, Feb 18, 2013 at 11:05 PM, Wesley Pennock notifications@github.comwrote:

@orangisque https://github.com/orangisque correct me if I am wrong but you click that thing top right to open the shop correct? If so why not make it say "ye old shope" or something?

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

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

[horusofoz]

+1 For splitting rewards off.

Would a plain background still be selectable? For myself a plain white/grey background would be essential to be able to use at work without raising the eyebrows of managers.

[horusofoz]

I think consolidating rewards, parties, etc into a menu list expandable from a navigation button would help clear up space so the UI would not appear too busy when we start incorporating more GTD features like:

• Multiple lists/categories
• Checklists/subtasks
• Task status
• Expanded notes capabilities
• Other service integration such as Pomodoro
• Other views such as Agenda or Smart Lists

[lemoness]

I just wanted to say that these mock-ups look gorgeous, and I am excited to see them implemented!

[PhilipHow]

Another comment for "those mock-ups look amazing". That's fantastic work :)

[horusofoz]

Something that needs to be taken into consideration for the mockups is the need for space for more lists. e.g. tag lists such as work, study, exercise, personal, financial, nearly due, on hold, etc.

Whether the above are collapsible, custom generated based on tags or flat file with a selector panel like RTM, we need these awesome looking mockups to also account for the required Getting Things Done features and accompanying extra lists required.

Consider Habits and Todos could/probably will end up being dismiss-able/hide-able lists to allow users to display only the custom tasks lists (based on tags) that they want to view/condier/attack at a given time. Todos will almost definitely be broken up into lists like work and study.

PS. The mock-ups above are awesome.

[wc8]

My 2¢: I like seeing the rewards column. It brings motivation into the picture of what can at times be an otherwise discouraging/overwhelming list. Please don't take rewards column out unless you really have to.

You can appreciate the picture more in the header than as a background image.

Colored lines instead of the shading is a much cleaner look. On the other hand, red tasks jump out at you more if the whole task is shaded red.

For colored lines for rewards: Grey could be used for rewards that are too expensive. Perhaps purple could be used for luxury rewards that are affordable. Green for lower cost rewards, etc. Perhaps, building on the suggestion for a meter showing progress toward the rewards, make the colored line the meter: for example, 40 GP when you only have 20: The line would be half grey, half purple.

[caycefischer]

I agree that seeing the rewards is great—for me as a user as you said, and also thinking about this as a product, it surfaces potential sources of revenue really well.

I'm unconvinced by the lines... they're more "designy" and thus appeal to my sensibilities but they're not nearly as clear. Too subtle perhaps. The shading is a lot easier for quickly triaging tasks/todos

On Thu, Feb 28, 2013 at 4:11 PM, wc8 notifications@github.com wrote:

My 2¢: I like seeing the rewards column. It brings motivation into the picture of what can at times be an otherwise discouraging/overwhelming list. Please don't take rewards column out unless you really have to.

You can appreciate the picture more in the header than as a background image.

Colored lines instead of the shading is a much cleaner look. On the other hand, red tasks jump out at you more if the whole task is shaded red.

For colored lines for rewards: Grey could be used for rewards that are too expensive. Perhaps purple could be used for luxury rewards that are affordable. Green for lower cost rewards, etc. Perhaps, building on the suggestion for a meter showing progress toward the rewards, make the colored line the meter: for example, 40 GP when you only have 20: The line would be half grey, half purple.

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

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

[horusofoz]

Could we have Rewards and all other lists hideable?

Though the lines look nicer I think the shading is much more effective in drawing attention.

Horusofoz "Live to learn. Learn to live." J.W.S.

On 1 March 2013 09:45, Zachary Kain notifications@github.com wrote:

I agree that seeing the rewards is great—for me as a user as you said, and also thinking about this as a product, it surfaces potential sources of revenue really well.

I'm unconvinced by the lines... they're more "designy" and thus appeal to my sensibilities but they're not nearly as clear. Too subtle perhaps. The shading is a lot easier for quickly triaging tasks/todos

On Thu, Feb 28, 2013 at 4:11 PM, wc8 notifications@github.com wrote:

My 2¢: I like seeing the rewards column. It brings motivation into the picture of what can at times be an otherwise discouraging/overwhelming list. Please don't take rewards column out unless you really have to.

You can appreciate the picture more in the header than as a background image.

Colored lines instead of the shading is a much cleaner look. On the other hand, red tasks jump out at you more if the whole task is shaded red.

For colored lines for rewards: Grey could be used for rewards that are too expensive. Perhaps purple could be used for luxury rewards that are affordable. Green for lower cost rewards, etc. Perhaps, building on the suggestion for a meter showing progress toward the rewards, make the colored line the meter: for example, 40 GP when you only have 20: The line would be half grey, half purple.

— Reply to this email directly or view it on GitHub< https://github.com/lefnire/habitrpg/issues/361#issuecomment-14257788> .

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

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

[caycefischer]

I think having everything (eventually) be collapsable/toggle-able is a goal for us. A lot of the upcoming features are going to be opt-in so it makes sense to go whole-hog on the modularity aspect.

On Thu, Feb 28, 2013 at 6:19 PM, horusofoz notifications@github.com wrote:

Could we have Rewards and all other lists hideable?

Though the lines look nicer I think the shading is much more effective in drawing attention.

Horusofoz "Live to learn. Learn to live." J.W.S.

On 1 March 2013 09:45, Zachary Kain notifications@github.com wrote:

I agree that seeing the rewards is great—for me as a user as you said, and also thinking about this as a product, it surfaces potential sources of revenue really well.

I'm unconvinced by the lines... they're more "designy" and thus appeal to my sensibilities but they're not nearly as clear. Too subtle perhaps. The shading is a lot easier for quickly triaging tasks/todos

On Thu, Feb 28, 2013 at 4:11 PM, wc8 notifications@github.com wrote:

My 2¢: I like seeing the rewards column. It brings motivation into the picture of what can at times be an otherwise discouraging/overwhelming list. Please don't take rewards column out unless you really have to.

You can appreciate the picture more in the header than as a background image.

Colored lines instead of the shading is a much cleaner look. On the other hand, red tasks jump out at you more if the whole task is shaded red.

For colored lines for rewards: Grey could be used for rewards that are too expensive. Perhaps purple could be used for luxury rewards that are affordable. Green for lower cost rewards, etc. Perhaps, building on the suggestion for a meter showing progress toward the rewards, make the colored line the meter: for example, 40 GP when you only have 20: The line would be half grey, half purple.

— Reply to this email directly or view it on GitHub< https://github.com/lefnire/habitrpg/issues/361#issuecomment-14257788> .

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

— Reply to this email directly or view it on GitHub< https://github.com/lefnire/habitrpg/issues/361#issuecomment-14263862> .

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

– Zachary Kain

Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public

[orangisque]

Some great points brought up here. Maybe it's worthwhile to do some split testing/surveying to see where people's preferences lie/what's important to them. It will give a better idea as to what to design for, such as what lists they want to see as their default set of lists (surveying would be good for this) or if people prefer shading vs lines vs another method for the items (testing would be good for this).

[orangisque]

I did some quick testing of the lists in code. You can get it here (includes html, css and 2 images I used): http://cl.ly/3H3O2g0A0X0r Actual test link here: http://o.atorier.com/habitrpg/

Actual mock ups I only have in .AI files. If anyone is interested, they are here: http://cl.ly/3x0P1f2f2c1N (2 out of the 3 files are not layered clearly...sorry.)

[wildcate]

Yay design brainstorming! Here is some more input that I hope helps : )

Though I like the mostly-white mockups and their clean look, I would also say that for myself the solid shading is much more motivating than just that puny little strip of easily-ignored red.

With the current colours, the grey tone almost exactly matches one of the greenish tones in brightness, which is sometimes confusing to me. Maybe there could be an option to do a solid (if thin) black line around the active tasks and no line around the completed ones?

I also agree that keeping the rewards on the screen is highly motivating, and I'd vote for it. It would also be nice to have all of the columns hide-able for those who don't want to see the carrots.

And finally, design-wise: I think it would be a very good move to include an optional colour/design scheme for colourblind people, maybe by making a box with different-density hatching around the checkbox? The darker the box, the more urgent/neglected the task. Especially red and green are colours that folks can have problems with, and those are more or less the key colours here.

And there will be shared tasks between people as well, once the party system is up and running completely. Personally, I would like my shared tasks to sit in the normal list (habit - daily - todo) so there's not a fourth list up on the screen or a need to toggle between my own ones and shared tasks. Since task icons have been considered, a "party" icon could be added to the tasks to mark them as shared ones. (And if the to-do tasks that are on the shared list give XP and gold just to the one who does them, that could be severely motivating!) Since filters are planned too, as far as I know, a filter "show only shared tasks" or "show no shared tasks" should take care of the different views for those who want to split.

And on a side note: I did appreciate the long hair as hairstyle choice very, very much. And I also did appreciate it not being labeled "male" and "female"... but I am going to niggle and say that technically, putting in short and long hair, the latter even with a flower, and labeling the category "gender" makes it abundantly clear that ladies wear long hair and men don't. Re-labeling the category "hairstyles" and maybe adding one long hair one without the flower would do the trick better, in my opinion. Plus I just realised that the long-hair-gender (see? you all know which one I mean?) is the only gender having colour choices for the outfit, and the neutral white the short-hair-gender has is not even among it. But pink! Folks! Not all long-haired people not even of the gender typically associated with long hair dig that colour! (Some of them actually hate it.) Pink is lovely as an option, as is yellow, but it should be the same options for all genders - erm, excuse me, all hairstyles available. And I personally would also prefer the outfits to look the same, as a standard, or to have longer and shorter shirts available for all hairstyles as well.

I hope the artist(s) who did the hair, and clothing, are not too miffed now - I know just too well how easy it is to fall into the preconception boxes and not even notice it. You have done and are doing lovely work with the pixel art!

[Pandoro]

@wildcate Please see my post in #314 regarding the gender thing.