exercism / discussions

For discussing things like future features, roadmap, priorities, and other things that are not directly action-oriented (yet).
37 stars 5 forks source link

Tweak homepage design #31

Closed kytrinyx closed 7 years ago

kytrinyx commented 8 years ago

Right now the homepage solves some important problems, but has some significant issues.

Good:

Bad:

I think the most important change would be to remove all pink where it is currently used, and then use it for two things:

  1. the three "call to action" buttons, one for each type of person who exercism is for, and
  2. the newsletter sign up (we could totally improve the call to action for that, as well)

The second-most important change would be to break the wall of text into more airy bullets and use highlights.

kytrinyx commented 8 years ago

Ref: https://github.com/exercism/discussions/issues/34

ghost commented 7 years ago

What do we want people to do on the frontpage? Here's what we currently have:

  1. logo - go to home
  2. languages
  3. donate
  4. notifications (bell icon)
  5. login to github
  6. 30 different languages
  7. write code like it's prose
  8. become fluent in a new language
  9. master the art of clean code
  10. signup for the "behind the scenes" mailing list
  11. about
  12. contribute to exercism
  13. help
  14. how it works (new devs)
  15. how it works (experienced devs)
  16. the command line client
  17. github - exercism.io
  18. twitter - exercism.io
  19. newsletter (the mailing list)
  20. heroku
  21. bugsnag
  22. rackspace
  23. fastly
  24. shopify
  25. profile (exercism.io)
  26. account (exercism.io)
  27. API key (exercism.io)
  28. recently viewed (exercism.io)
  29. logout (exercism.io)
kytrinyx commented 7 years ago

@gusseting I'm not sure what the purpose of this list is—it puts every single link on the same level, but the things that we ask people do is a function of design, not existence.

ghost commented 7 years ago

@kytrinyx the purpose is to take stock of what is on the frontpage, and to see how we can best communicate those links within that space - for example, there's a mailing list form and 2 links on the frontpage. In the future, could it be worth considering having one method to communicate the mailing list, which is generally the standard for a front page?

It's not uncommon to do a stocktake like this before reconsidering a frontpage. For example, http://www.studiothick.com/ did exactly what I've done for: http://www.artsaccess.com.au/ in order to take stock before changing the front page. I'm checking with them re: mailing list form twice (unusual!) on their front page.

I've noticed that others eg: http://www.alistapart.com simply have a link to "email" which takes them to the signup form - perhaps because they wanted to provide options which would take up too much space on the homepage: http://alistapart.com/email-signup/

Does that help?

kytrinyx commented 7 years ago

the purpose is to take stock of what is on the frontpage, and to see how we can best communicate those links within that space

The header and footer links are header and footer links. The menus are menus. There's a huge difference between a link within a dropdown (e.g. API Key) and a call to action on the homepage that includes a form. I don't understand how it helps make decisions about the usability of the homepage to list out everything at the same level of abstraction.

troubalex commented 7 years ago

Jumping in here, to get the ball moving again. I have been thinking about how I would approach this kind of thing in the given time frame. I hope this makes sense, and helps @gusseting further on her way.

Steps

  1. Strip all styling from the page, including icons, font styles, and colors, to really only focus on information architecture and content. This can be done in any kind of word processor.
  2. Rank what is on the page by importance. (Hint: some elements may have the same rank)
  3. Work on visual hierarchy based on the ranking. Which elements have to be at the top, what should be bolded, do we have enough or too many headings? What is the main call to action on the page, and where should it be placed? Is there content that needs improvement, e.g. clarification, shortening, updating, or a plain rewrite?
  4. Move to your design tool of choice, and start wire-framing in black and white. Play with rhythm, typography, layout, device sizes. If your comfortable enough with HTML and Sass/CSS, jump right into your editor, and start prototyping. Still no colors, only black, white, and grey. If you want to add images or icons, use placeholders so as to not distract from the IA.
  5. Add color and other visual elements, and adjust as you move along.
  6. Once you're happy, transfer your protoype over into the app.

Why am I proposing a prototype? By limiting the scope to the front-page and your own code, you will be able to focus on the actual page, and won't have to deal with the added complexity of a full-blown web application. Basically, you're decoupling the tasks, and focus first on the design, then on the implementation. Especially when considering the short amount of time you still have, you will be able to "deliver" something useful to the project at each step of the way.

Things to keep in mind

Critique

What you'll learn

Resources

kytrinyx commented 7 years ago

This is phenomenal, @troubalex!

It's okay if the front page looks different to the rest of the app for a while, as long as the inner pages don't break.

I completely agree!

You will have to publish the page, or at least your code somewhere on the internet for that to work. Ask your coaches or myself for help if you get stuck.

I would suggest plain HTML in GitHub Pages. It's fast, and it's a simple git push.

ghost commented 7 years ago

Adding notes of other issues to assist: https://github.com/exercism/discussions/issues/30 - Onboarding: diagram that shows how exercism works https://github.com/exercism/discussions/issues/53 - Explainer Video and/or images for exercism.io https://github.com/exercism/discussions/issues/64 - How design problems we're having are solved elsewhere

troubalex commented 7 years ago

I thought I'd pick this up again.

Content analysis

content_analysis.pdf

While the content is now grouped by persona (or developer type), the flow of arguments is unsurprisingly similar. Unfortunately, the copy doesn't really address how it all works and hangs together with exercism, even though the process is implicitly repeated three times.

Rough concept

concept-sketch (This is a first brain dump, don't get hung up on the details)

This concept groups benefits for all three personas by the step in the process: doing exercises, improving skills through feedback from others, and finally improving skills by giving feedback. All three steps should be accompanied by some kind of screenshot'y illustration, such as a terminal session and conversations happening on the site.

The reasoning here is that at each step of the way, there is value for the individual user: newbies might already benefit from the process of going through the exercises and making the tests pass while the most expert users might find giving feedback to other experienced developers the most valuable.

Design challenge

Clearly pointing out the benefits of joining exercism to all three personas while at the same time give an idea about the process and steps involved.

Illustrations/screenshots are used to introduce the three different aspects of exercism, and to break up the current wall of text. As a side effect, it will force us to be concise and short in our argumentation, or the layout will break.

I believe a lot of the current copy can be reused, but I'd suggest condensing it down to the core. People don't read on the internet.

Caveat

I read though some of the user research @kytrinyx sent me earlier. Since it has been conducted on an apparently very different, earlier version of the site, it's hard to draw conclusions at this point.

I have a hunch however that the version that was tested took a similar approach. Can someone point me to any kind of screenshots or similar of the old version? I'd like to take a look and see if the concept was wrong, or if it was the design implementation that caused trouble.

kytrinyx commented 7 years ago

Here's the old homepage:

old-1

old-2

old-3

old-4

kytrinyx commented 7 years ago

(Sorry, that's in four different screenshots to get the whole page)

jtigger commented 7 years ago

I participated in some of the user interviews, synthesis and ideation that led to the current structure of the homepage.

IIRC, one of the big insights was that the way that each cohorts' (Early Programmer, Craftsperson, Language Nerd) need is best realized was through significantly different appeals, language and level of detail. That insight motivated partitioning the audience as the first step.

I see that the exercism process is conspicuously absent from the homepage. Is there's a way to address both concerns at once: to keep the audience partitioning while (succinctly) illustrating the three step flow?

troubalex commented 7 years ago

Thanks for the screenshots, @kytrinyx, and for the context, @jtigger.

Is there's a way to address both concerns at once: to keep the audience partitioning while (succinctly) illustrating the three step flow?

I think so. It might work similar as a variation of the concept sketch above, or it may end up very differently. My current hunch is that there needs to be a page layer between the front page and the detailed "How it works"-pages which is currently lacking. I need to work more with the content before I know more.

In any case, this goes beyond tweaking. I have some ideas there that are more iterative, and that I could pursue first.

kytrinyx commented 7 years ago

In any case, this goes beyond tweaking.

Yes, that's been my suspicion—and it's been really hard to figure out how to ask the right questions to figure out what we're actually asking of a user experience designer.

troubalex commented 7 years ago

In the end, it boils down to how much time someone can invest, and how much change the project can tolerate. There is definitely room for iterative changes to the frontpage which will help, and which would be more sensible to explore first.

Me throwing out the concept above was not much work, especially in comparison to what might result from it. It's a good exercise, even if it never materialises, because it adds to the discussion.

troubalex commented 7 years ago

Anyway, how about changing the header from solid pink to a photo-background, and finding a better typeface for the headings?

kytrinyx commented 7 years ago

The concept above (now that I've finally sat down and read through it in detail!) is really interesting. I think you're absolutely right that we're missing a step in between the "why you care" and "how to get started", which is what I think we have now.

I think that starting with changing the solid pink and the typeface for headings would be a great start.

jtigger commented 7 years ago

What I'm reading from you, @troubalex is the flow: why? => what? => how?

or

motivation => scope of commitment => smooth launch

Motivation varies per persona Commitment can be seen as identical What makes for a smooth launch varies by level of skill:

troubalex commented 7 years ago

@jtigger

What I'm reading from you is the flow: why? => what? => how?

Pretty much, yes. My comment on motivation was simply a reply to @kytrinyx wondering about which would be the right questions to ask. Sorry, that wasn't very obvious.

I am by the way, convinced that the front page (and any yet to be created intermediate page) can be aimed at all skill levels, as long as the focus is on benefits and process rather than instructions.

jtigger commented 7 years ago

Pretty much, yes. My comment on motivation was simply a reply to @kytrinyx wondering about which would be the right questions to ask. Sorry, that wasn't very obvious.

It probably was. I'm in the habit of over-communicating when it's happening in text... think of it as more confirmation that anything else. :)

I am by the way, convinced that the front page (and any yet to be created intermediate page) can be aimed at all skill levels, as long as the focus is on benefits and process rather than instructions.

So delighted that you're on this, @troubalex!!!

troubalex commented 7 years ago

Quick (conceptual) hack while trying different variations of typefaces for the hero area: http://codepen.io/troubalex/pen/LRAWJa

jtigger commented 7 years ago

_(I don't have any training in design, but I'm trying to provide some feedback; I hope you find this useful, @troubalex.)_

I gotta say, I'm not quite diggin' it... it strikes me as "too harsh" of a contrast. The white box looks like a sticker on top of the image. I don't know if I'm old-fashioned but I really dig a minimalist style where the negative space is simple/monotone/subtle... and images of real things are somehow framed/boxed/contained against.

I looked at the homepages of sites similar to exercism. Here's some that seem along the lines you're looking...

Ones that were of similar format, but somehow rubbed me the wrong way:

troubalex commented 7 years ago

This is excellent, @jtigger! The whole point of my "hack" really was to get something tangible out there that can be discussed. I agree, it's not good; in fact the final result will probably be nothing like it. It's fine, it's part of the process.

Also, I have very short toes.

Thanks for the list of sites, some good inspiration there.

  • http://www.codewars.com/ — the artwork in the background does convey a sense of participating in a tradition of discipline/quality. There is a single narrative: battle your way to better. In contrast, Exercism is co-discover your way to better. The former is an ego-enhancing feel; the latter is a collaborative feel.

This is where things become interesting. If you look at codecombat.com you can see that it is designed for students and their teachers: colors, type, round corners all communicate that this is targeted at children. Codingame.com looks like my 19-yo would be smack in the middle of the target group – while it makes me dizzy.

If the "soul" of exercism is discovery and collaboration, then the design should reflect that with friendly type, and imagery that puts (curious) people front and center. The copy already does that quite well.

kytrinyx commented 7 years ago

@troubalex @jtigger I've been doing a whole lot of thinking and talking and musing over the past few weeks and months, and I realized that I have had an insight about Exercism that I've not communicated anywhere.

Here's what I've come to understand:

Exercism is based on the idea that you can develop a high degree of fluency even at a low level of proficiency. In other words, you can be extremely fluent in the basic syntax, idioms, conventions, and standard library of a programming language, without being able to solve real-world problems in that language.

This is useful, because it frees up cognitive resources. Once you have the fluency at the basic level, it is much easier to improve your proficiency, and then ratchet up your fluency.

Fluency

Fluency is described by the Language Hunters project as:

What you can say when you’re woken up in the middle of the night with a flashlight in your face.

Proficiency

The Language Hunters describe four levels of proficiency where you have the ability to express and understand:

  1. Very simple, concrete ideas. E.g. “Good music”. “Drink”.
  2. Simple, complete sentences. E.g. “How do I get to the party?”
  3. More complex, descriptive language, e.g. telling a story about what happened at the party.
  4. Complex political, social, economic topics, e.g. “Should parties be illegal?”

It's interesting to bring this back to the three categories of people who typically participate on Exercism:

Code Newbies - people who are learning to program for the first time.

Polyglots - programmers who are ramping up in a new language

Artisans - programmers who are diving deep into their primary language(s).

Both CodeNewbies and Polyglots are aiming for that high level of fluency at a low level of proficiency, however for CodeNewbies the path to getting there is somewhat longer, because they also need to learn the basic programming concepts, not just the syntax/libraries/conventions.

The artisans don’t quite fit into the “high fluency / low proficiency” model, but they’re crucial to the project, because they tend to give excellent feedback, they’re often at a place in their career where they’re developing their mentorship and leadership (both technical and people-oriented) skills, and they often care about code review.

I think that it would be possible to not directly cater to the artisans on the homepage, while still letting them completely and absolutely enjoy and benefit from the site.

If the "soul" of exercism is discovery and collaboration, then the design should reflect that with friendly type, and imagery that puts (curious) people front and center.

Yeah, I think one of the things that this comes back to is journey vs destination.

Exercism is the most valuable if you slow down and explore. People who act as though the point is to get through as many exercises as quickly as possible get a lot less out of it.

(Side note: we haven't introduced gamification, because that tends to encourage the wrong type of behavior (gaming the stats, rushing through). That is not to say that some subtle or well-thought-out forms of gamification couldn't be a great addition to the product, but it's a dangerous ground where getting it wrong can be disastrous, and it has seemed safer to avoid it altogether.)

There are many ways of slowing down and getting more value out of the process. E.g.

jtigger commented 7 years ago

I love this, @kytrinyx.

In terms of design... what comes up for me is: words that speak to Code Newbies an aesthetic that speaks to the artisans.

Side-question: do you prefer "Code Newbies" to "Early Programmers"? Any difference in your mind between the two?


@kytrinyx said:

Exercism is the most valuable if you slow down and explore. People who act as though the point is to get through as many exercises as quickly as possible get a lot less out of it.

I couldn't agree more. In fact, we're having a bit of a growth spurt on the Java track and it's been making me think about ways that we can go deeper within one exercise rather than go wider with a longer set of exercises.

In that vein, has the idea of having tree shaped curriculum ever come up? That is: a main thread of exercises, off which branches fork off to go deeper. I see the 99 Bottle six-pack experience possible in all kinds of exercises. We could "hack" something into the current mechanism (i.e. a linear flow) or it could be supported as a first-class experience.

IanWhitney commented 7 years ago

A suggestion I made (but haven't really pursued) would be to have multi-step exercises. Following the 99 bottle idea, you'd have

The advantage here is that students dig deeper into problems, spending more time thinking about the design trade offs.

This can, I think, be done with the current code. I did a demo of how it could work in Rust: https://github.com/IanWhitney/xrust/tree/demo_of_knight_attack

robkeim commented 7 years ago

Thanks @kytrinyx for the additional insight on the objective of Exercism:

Exercism is the most valuable if you slow down and explore. People who act as though the point is to get through as many exercises as quickly as possible get a lot less out of it.

(Side note: we haven't introduced gamification, because that tends to encourage the wrong type of behavior (gaming the stats, rushing through). That is not to say that some subtle or well-thought-out forms of gamification couldn't be a great addition to the product, but it's a dangerous ground where getting it wrong can be disastrous, and it has seemed safer to avoid it altogether.)

I stumbled upon the sight trying to learn F# to familiarize myself with functional programming and I found it fairly surprising that there was no gamification component. I guess that shows how accustomed I've become to it being a part of my life, for better or for worse.

I definitely agree that gamification can lead to unwanted behavior, as people tend to optimize for whatever metrics they're given. If the goal of the site is people learning, creating a "how much you learned" metric isn't an easy task. I'm happy to hear that was a conscientious choice, despite the type A part of me that deep down still wants to get to 100% completion :)

troubalex commented 7 years ago

I had to let this sink in for a bit, @kytrinyx, and think about it. This is some great insight.

To me, even though all three user groups have slightly different needs and objectives, it seems like they all have one thing in common: they're sticking their heads out. All of them expose a part of their self to a more or less predictable audience. They're taking a risk.

Code newbies and polyglots are probably concerned about making a fool out of themselves, or failing in public. For the artisans, it might be more about finding their flock, but I suspect they also worry about looking stupid in the eyes of their peers.

While the functionality, copy, and interactions should make sure to meet the different needs and objectives of all three groups, the visual language could address the emotional part of entering a safe space, of feeling welcome regardless of where on the journey people are.

Exercism's design principles could therefore build upon terms such as safe, human, supportive, friendly, and welcoming. Combined with a clear and concise language that caters to a technical audience, these could could tell quite a well-rounded story.

@jtigger

In terms of design... what comes up for me is: words that speak to Code Newbies an aesthetic that speaks to the artisans.

I'm not sure I'd agree with that sentiment based on what I outlined above. In my mind, polyglots and artisans are a similar kind of people as they are both proficient programmers who differ in their objectives. Artisans are probably a subset of polyglots, to varying degrees.

At the same time, becoming proficient at programming is probably the main driver for code newbies. To them, polyglots might embody their aspirations.

So to me, the proficient programmer should really be at the core of the aesthetics, obviously without putting off newbies.

Disclaimer: None of this is researched specifically, but based on my experience from working on Developer Experience (terrible term) and products for technical audiences. I didn't have the chance to read through all the existing material on exercism, unfortunately.

jtigger commented 7 years ago

@IanWhitney succinctly suggested breaking down the 99 Bottles problem into phases, above.

YES! There's another opportunity I saw this morning like that in the all-your-base exercise (exercism/x-common#461). I'm certain there are others.

If we do a good job of consistently providing depth to exercises and continuously emphasizing that it's 💯 % okay to skip the optional parts ("feel free to go breadth-first or depth-first, it's meant to be a choose your own adventure experience"), this is the kind of fodder that can bring out even more valuable conversations.

kotp commented 7 years ago

Something else that can, and I have done and have seen, happen is solving, reviewing, moving on, then coming back after an extended period of time to do it again, in another way.

First time may be a goal to solve, and on review, become idiomatic, next time may be to solve in a way that is not only not idiomatic, but something that you would definitely not do, but it works, and perhaps discover when you might appropriately do the same thing in another context. Another time may be exploring design patterns as applied to the problem, or even stylistic changes. Each way, exploring and developing the styles that you adopt or discard.

jtigger commented 7 years ago

@troubalex said:

While the functionality, copy, and interactions should make sure to meet the different needs and objectives of all three groups, the visual language could address the emotional part of entering a safe space, of feeling welcome regardless of where on the journey people are.

I just said out loud, "oooo, I LOVE that!!!"

Exercism's design principles could therefore build upon terms such as safe, human, supportive, friendly, and welcoming. Combined with a clear and concise language that caters to a technical audience, these could could tell quite a well-rounded story.

YES! and I'd add balancing attributes too: challenging, disciplined, stretching... growing pains are unpleasant sensations. I believe that is invigorating to our desired audience.

jtigger commented 7 years ago

@troubalex said:

@jtigger

In terms of design... what comes up for me is: words that speak to Code Newbies an aesthetic that speaks to the artisans.

I'm not sure I'd agree with that sentiment based on what I outlined above. In my mind, polyglots and artisans are a similar kind of people as they are both proficient programmers who differ in their objectives. Artisans are probably a subset of polyglots, to varying degrees.

At the same time, becoming proficient at programming is probably the main driver for code newbies. To them, polyglots might embody their aspirations.

So to me, the proficient programmer should really be at the core of the aesthetics, obviously without putting off newbies.

I'm not seeing the disagreement. :) Are you saying that ... what are you saying?! I think we're talking about how there are these three different cohorts who have both an overlap of need and a disjoint of need (duh)... but that perhaps our design focus should favor one?

troubalex commented 7 years ago

@jtigger

I'm not seeing the disagreement.

It was late when I wrote this. 🙈 I guess what I was trying to say is: I disagree with focusing on the artisans, I'd rather put the polyglots as main audience for the visual design because they represent the overlap between all three cohorts.

atsullivan commented 7 years ago

@kytrinyx I am new to the exercism project and would love to help improve the UI. I have been reading through the comments for this issue and it seems like there were a lot of good ideas but there hasn't been an update in about 6 months. I have a lot of ideas for making the design better but am just wondering where I can get started: Are there specific changes that you have in mind? Or should I just make some changes that I think would be good and create a pr?

Insti commented 7 years ago

Hi @atsullivan, yes the design of the current Exercism site has not changed much recently due to plans for a newer, better version see: https://github.com/exercism/discussions/issues/113

But that's no reason not to contribute if you still want to, PR's (accompanied by screenshots) are always welcome and can provide a useful starting point for discussions about whether to include the changes.

iHiD commented 7 years ago

@atsullivan Hey and thanks for wanting to get involved with the UI! As @Insti says, we're currently deep in a big rethink about how the UI works and there is loads of work in the background to move that forwards. We're hoping to launch a lot of the new changes in July. At that point (and maybe before) we will definitely be looking for feedback on the new designs. In the mean time if you want to help improve Exercism today then PRs are always appreciated, but I do feel a little guilty suggesting that you change what's there, knowing that everything will be changing dramatically in the foreseeable future.

atsullivan commented 7 years ago

@Insti @iHiD Thank you for the direction and for your honesty. Is there anyway that I could be involved with implementing the new UI designs, or perhaps work on improving areas of the UI that may not yet be covered by your massive overhaul? I would love to contribute but also don't want to shove myself in the middle of a team that has already been working very hard on this.

iHiD commented 7 years ago

@atsullivan Sorry for the slow reply. The honest answer is not yet - we've deliberately kept this bit as having a very small, established team to enable us to move nimbly. However, we'd love and value feedback, especially if you have an eye for UI. Can I message you when we have some bits to show and get your insight on them please?

atsullivan commented 7 years ago

@iHiD I totally understand and agree that keeping it to a smaller team will move the project along more efficiently. Yes, please send it to me when you want some feedback. I work in the backend professionally but have always loved UI design, so anyway that I can help with this project would be great. I would love to be kept in the loop. Thank you for all of the info, I look forward to the opportunity to contribute!

kytrinyx commented 7 years ago

@atsullivan Your best bet is to subscribe to the "discussions" repo so you get updates as we post our questions, insights, and experiments here. (Definitely check out #154!)

I'm going to go ahead and close this.