[Serious] User Interface Class Final Project

[hi19hi19]

http://michael-gillett.github.io/the-teaching-tree/

Hi FFR, I am part of a group doing a final project for a User Interface Design course.
Part of our assignment is to get feedback on the design from people on the internet. That's where you guys come in.

What we do not need feedback on:

- Whether or not this service needs to exist. Assume it does; analyze our group's execution.
- The backend implementation, or lack thereof. There's a lot of concerns with things such as tracking each user’s account information that our prototype interface completely glosses over. This is for a reason.
- The content of the trees themselves and the courses we have selected. This is just for a UI design class. Our group has obviously not gone through every course on the internet relevant to Machine Learning, selected the most important subtopics, and verified that the courses we have chosen are the best ones. Understand that the text is nothing but relevant-looking placeholders.
- Our business plan, or lack thereof. Obviously we haven't thought about things like how to fund this website, how to monetize it, etc.

What we do need feedback on:

- Implementation and intuitiveness. We've gone with the tech tree idea. How could it be better? Are the prerequisites and successive subjects clearly displayed with this method? Is the information about specific courses easily and intuitively accessible?
- Ease of learning. Are some of the features of the site not obvious?
- Visual design. Does it look good? Does something stand out to you as obviously ugly?
- Subjective satisfaction. Just overall, does it feel like a nice interface?
- Any dumb shit we accidentally missed. Is something spelled wrong, for instance?

With all that said, please give feedback on our design! Feel free to be blunt about your issues with the interface, I would much prefer that compared to people being too shy to give us feedback.

Thanks!

[PhantomPuppy]

on the homepage, i think it would look much nicer if like, each heading had a drop down for the information when u click on it. kinda like spoilers in forums. would definitely be less overwhelming on what im spose to be getting out of a summary of the site's functionality, purpose, etc.

the demo itself looks pretty simple, which is a good thing. why have a confusing layout when the purpose is to be learning stuff?

hope this helps a bit.

[AragakiAyase]

first thing I noticed (going to bed now will look again later):

when I went to click on machine learning I expected the whole image to link but only the text does, maybe that should be changed?

edit: also lol [serious] in chit chat

[AutotelicBrown]

I'm assuming you mean only the demo? I'll answer assuming that. Hope my limited knowledge on HCI can be helpful.

First page showing available topics is pretty similar to other MOOC platforms, it looks nice and for the most part it works well. Not much to say about that.

First thing that I get clicking the link is a massive contrast change, and the sudden change in how the page looks forces me to look around to get my bearings. I'm no graphic designer but the overly gray design doesn't feel good to the eyes to me.

About the tree itself, I feel the fields are too verbose and occupying too much space for me to grasp the whole structure without having to think. Adding up to the fact you'd realistically have to deal with taller trees with more branches, a more compact look seems warranted (e.g. putting the descriptions of each node as on hover information or omitting it altogether until it is clicked). More on that point, I legitimately took a while to notice I could click on other nodes because of the lack of feedback and not being obvious that a node is selected in the first place.

The right column describing the contents of a node seems good to me, although the "Complete" button functionality isn't clear at all (is it only tracking locally my progress, am I submitting something somewhere or what) and I can't rollback if I press it.

Additionally, the page completely breaks if I try to browse with a smaller window. I hope it works with internet explorer.

On another note the tree idea in itself is pretty interesting, I can easily see it being useful with a proper implementation.

[EzExZeRo7497]

Most of the issues I had were pretty similar to Auto's.

Bottom of the page:


Demo:
- It took me a while to realise where to start, mainly because the difference between nodes is only caused by a very slight difference in shade. I do think that maybe making the nodes smaller as it goes further down the tree would make it more intuitive that the node before it is a pre-requisite.

- Didn't really have issue with the lack of feedback in the demo, but I could definitely see how it'd create problems. Hovering on a node and having that pop up slightly would be nice.

- Boxes are a little too large, it makes the page appear extremely overwhelming and it forces me to pay close attention to what I'm reading or looking at in general. I have to A more compact view would be good, maybe having the boxes smaller or the descriptions on the boxes in the descriptions of the course on the right.

- The tree could be centered I think, considering how potentially large the tree would be in the future.

- Personally find the green on grey layout very jarring, the stark contrast in colour is mainly apparent when you click on complete for a particular node.

- In the Python section, the description for the Codecademy could be described a little more to know what to expect.

- I really like the tree design, it does make pre-requisites look far less daunting and a lot more organised.

On another note I've been wanting to read up on game theory for a while now (already have background with descriptive and inferential statistics) so this seems like a pretty good start, thanks for this.

[Soundwave-]

My biggest issue with it was also one of Auto's: The largely greyscale color palette combined with the large monolithic design of the tree provides no contrast for the individual nodes, making it overall feel difficult to decipher, if only by a little bit.

[Wineandbread]

Heads up, I don't know anything about design. Comments from the lay man:

/search.html:

- I think the search should be moved up or onto the header (your header might be a little too empty anyway). The way it looks on my monitor (1080p), it almost clips into my taskbar even though it doesn't scroll down and thus looks a bit awkward. There needs to be a bottom margin. (same thing happens when I shrink my browser)

/machine-learning.html:

- I don't think you should remove your header completely going into this page. A reduced width header would be better, removing it altogether seemed a bit off to me

- I don't know if it's relevant to the design critique, but the page seems to be missing summary elements that I would expect for describing the course. You know how there's always like a course description on learning pages, or information regarding the overarching topic? You have them for the topics in your tree, but not the topic itself. A bit like missing a home/root page, only being able to switch from topic to topic.

- The design resolution doesn't match your home page. It's too wide. Consider your left/right margins on the home page, or even the github page. Try to match your tree page match.

- The page breaks down when I shrink my browser. The same issue occurs on my phone browser. Not sure if you need to consider this, but it's a bad design flaw given growing internet compatibility with mobile resolutions.

- I can't unmark completed topics

[edit] one more thing: check your capitalization

Otherwise I thought it was pretty good, hope your group does well!

[hi19hi19]

Thank you guys so much for your feedback!

Our main code guy pushed some minor updates to the demo today. Like being able to un-complete a course, a back button from each tree, and some layout fixes.

As for complaints about things breaking on tablet/mobile... ideally we would love to get a responsive design that worked at multiple view widths, but given the time frame we have, our group has elected to ignore that. We're presenting the project for a grade on a laptop so we're just designing the site to work for that width. Probably should have mentioned that.

Talking about color schemes with the group because that seems to be a common feedback.

I'll make another post tomorrow hopefully with more updates.

Originally Posted by AragakiAyase

lol [serious] in chit chat

As if I'd get half as many responses if I put this in Critical Thinking or some other dead board ¯\_(ツ)_/¯

[justin_ator]

Originally Posted by AragakiAyase

when I went to click on machine learning I expected the whole image to link but only the text does, maybe that should be changed?

Most notable thing to me was this

[shenjoku]

Looks pretty good. Only noticed a few things:

- I would suggest adding some padding at the bottom of the page below the search bar. Having interactable things flush against the edge of the window is usually bad. It makes it look like you can scroll further down when you really can't.

- I don't like how when selecting a topic it completely hides the arrows of the ones above it. It breaks the flow and makes it a bit confusing to look at.

- When completing or uncompleting something the button doesn't update to reflect the current state. This requires you to click away and then click back to be able to toggle it again. This is one a pretty bad bug that you should definitely fix.

[Bahamut-X]

machine-learning.html:

- This page could really benefit by including some sort of navigation menu. I feel trapped when I come to this page since there are no readily apparent navigation elements except for the back button, which is awkwardly placed and insignificant (not to mention unnecessary since the browser back button serves the same purpose).
- Your tree UI will not scale well considering the size if each subject element and the speed at which the color gradient is changing. What if the tree was 10 levels deep? Your nodes would be black.
- I feel like it would be confusing to track which category a given subject belongs to if your tree got too deep / had 3+ categories. You could mitigate this problem by making the categories sticky if the tree becomes long enough to scroll.

search.html
- I feel trapped here again since there is no readily apparent navigation element which allows me to get back to the home page.

[hi19hi19]

Originally Posted by Bahamut-X

search.html
- I feel trapped here again since there is no readily apparent navigation element which allows me to get back to the home page.

I need to clarify that search.html is the homepage for the site.
The page I linked to you is a write-up that we are supposed to be handing in; the demo is the interface itself and so doesn't need a link back to the writeup that is not part of the site.
I figured you guys would want to see the writeup too because it has some of our justification and thought process, and I'm sorry I wasn't clearer about the distinction.



Anyway I just submitted the comments to the group for consideration and hopefully we're going to fix some stuff tomorrow!
Unfortunately some of the suggestions here are pretty good but would require major, major re-coding, something we don't have time for, but I will try to get as much done as possible.
We definitely heard the feedback about bland, grey, monolithic and will try to inject some color and humanity into the interface (keeping it clean, still, of course)
The fact is we're a group of all STEM majors... our visual design sense is clearly collectively not as good as our practical coding skills.

Thanks again for your feedback, I'll let you know how the final prototype winds up and how the project goes!

[AutotelicBrown]

Best of luck turning in your project.