Old 12-7-2015, 12:47 AM   #1
hi19hi19
lol happy
FFR Simfile AuthorFFR Veteran
 
hi19hi19's Avatar
 
Join Date: Oct 2005
Location: DESTINY
Age: 28
Posts: 11,897
Default [Serious] User Interface Class Final Project


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!
__________________




Last edited by hi19hi19; 12-7-2015 at 12:51 AM..
hi19hi19 is offline   Reply With Quote
Old 12-7-2015, 01:13 AM   #2
PhantomPuppy
Shenanigans!
FFR Veteran
 
PhantomPuppy's Avatar
 
Join Date: May 2012
Posts: 1,532
Send a message via Skype™ to PhantomPuppy
Default Re: [Serious] User Interface Class Final Project

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.
__________________

Psychoangel's One Div. Higher (D2-D3): 2nd
10th Official (D3): 13th
gstarfire's All Skill (D3): 1st
Zenith's Helping Hand (D3): 1st
DC's Team Extravaganza (D4): 5th
FG's Winter Vanilla (D4): 2nd
Portalbob's Round Robin (D4): 3rd
Deadly and Preggers' Bracket (D5): 17th
Squid and Puppy's Summer Vanilla (Host)
Badman's Bloody RNG (D5): 2nd
11th Official (D6): 11th
(as GhostieGoBoo) reuben_tate's Ramen Box Tourney (D6) - 4th
12th Official (D6): TBD

Quote:
Originally Posted by Funnygurl555 View Post
you know what they say

under all the rust is really shiny... metal
PhantomPuppy is offline   Reply With Quote
Old 12-7-2015, 01:29 AM   #3
AragakiAyase
Waifus
FFR Veteran
 
AragakiAyase's Avatar
 
Join Date: Apr 2015
Age: 23
Posts: 950
Send a message via Skype™ to AragakiAyase
Default Re: [Serious] User Interface Class Final Project

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
__________________

pikakirby123 reincarnated






Last edited by AragakiAyase; 12-7-2015 at 01:34 AM..
AragakiAyase is offline   Reply With Quote
Old 12-7-2015, 03:52 AM   #4
AutotelicBrown
Under the scarlet moon
FFR Simfile AuthorFFR Veteran
 
AutotelicBrown's Avatar
 
Join Date: Jan 2014
Age: 26
Posts: 813
Default Re: [Serious] User Interface Class Final Project

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.

Last edited by AutotelicBrown; 12-7-2015 at 03:53 AM..
AutotelicBrown is offline   Reply With Quote
Old 12-7-2015, 05:56 AM   #5
EzExZeRo7497
新しい日の誕生
FFR Veteran
 
EzExZeRo7497's Avatar
 
Join Date: Dec 2010
Location: Singapore, SG
Age: 22
Posts: 6,831
Default Re: [Serious] User Interface Class Final Project

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.
__________________
Quote:
Originally Posted by shadow 1800 View Post
the power to defeat a super sandwich in a single bite... and this is to go even further beyond
EzExZeRo7497 is offline   Reply With Quote
Old 12-7-2015, 06:39 AM   #6
Soundwave-
Carry your failures proud
FFR Veteran
 
Soundwave-'s Avatar
 
Join Date: Sep 2015
Age: 18
Posts: 628
Default Re: [Serious] User Interface Class Final Project

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.
__________________
Quote:
Originally Posted by [11:38 PM] Hakulyte
only person who can legit tilt me is like YoshL
Quote:
Originally Posted by スンファンさん
右に3回回らない限り間違います。
Soundwave- is offline   Reply With Quote
Old 12-7-2015, 01:50 PM   #7
Wineandbread
Custom User Title
FFR Veteran
 
Wineandbread's Avatar
 
Join Date: Oct 2007
Posts: 2,012
Default Re: [Serious] User Interface Class Final Project

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!
__________________
Quote:
Originally Posted by Gundam-Dude
my semen is flying through the air as we speak
We climb up a lot of ladders, and fall down a lot of chutes.

Taking "all" oddjobs! PM me requests. Requests filled: 2 last active Mar. 6th, 2017


Keep it real pls. Will deny requests I cannot manage.



Last edited by Wineandbread; 12-7-2015 at 01:55 PM..
Wineandbread is offline   Reply With Quote
Old 12-7-2015, 09:04 PM   #8
hi19hi19
lol happy
FFR Simfile AuthorFFR Veteran
 
hi19hi19's Avatar
 
Join Date: Oct 2005
Location: DESTINY
Age: 28
Posts: 11,897
Default Re: [Serious] User Interface Class Final Project

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.

Quote:
Originally Posted by AragakiAyase View Post
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 \_(ツ)_/
__________________




Last edited by hi19hi19; 12-7-2015 at 09:05 PM..
hi19hi19 is offline   Reply With Quote
Old 12-7-2015, 09:29 PM   #9
justin_ator
Fuck your lemons
FFR Veteran
 
justin_ator's Avatar
 
Join Date: Mar 2007
Location: Colorado Springs, CO
Posts: 7,361
Default Re: [Serious] User Interface Class Final Project

Quote:
Originally Posted by AragakiAyase View Post
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
__________________
justin_ator is offline   Reply With Quote
Old 12-7-2015, 11:15 PM   #10
shenjoku
Wubalubadubdub
FFR Veteran
 
shenjoku's Avatar
 
Join Date: May 2005
Age: 32
Posts: 1,697
Default Re: [Serious] User Interface Class Final Project

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.
__________________
boop

Last edited by shenjoku; 12-7-2015 at 11:17 PM..
shenjoku is offline   Reply With Quote
Old 12-9-2015, 01:05 AM   #11
Bahamut-X
MN is too cold
FFR Simfile AuthorFFR Veteran
 
Bahamut-X's Avatar
 
Join Date: Nov 2004
Location: A place
Age: 27
Posts: 3,380
Send a message via AIM to Bahamut-X
Default Re: [Serious] User Interface Class Final Project

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.
__________________
Quote:
Originally Posted by talisman
the first time I saw a black man (I was like 2, this is a story that's been told to me) it was in line at a store or something. I said, "Look, Mommy, a gorilla!" really loudly.
Quote:
Originally Posted by SuperWarZoid
You guys made me realize something. Im jesus. I am here to bring the good news. There is hope. if you cease to be gay, there is hope.

"You shall not be gay"
This is my only commandment
Bahamut-X is offline   Reply With Quote
Old 12-9-2015, 01:18 AM   #12
hi19hi19
lol happy
FFR Simfile AuthorFFR Veteran
 
hi19hi19's Avatar
 
Join Date: Oct 2005
Location: DESTINY
Age: 28
Posts: 11,897
Default Re: [Serious] User Interface Class Final Project

Quote:
Originally Posted by Bahamut-X View Post
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!
__________________




Last edited by hi19hi19; 12-9-2015 at 01:21 AM..
hi19hi19 is offline   Reply With Quote
Old 12-9-2015, 01:53 AM   #13
AutotelicBrown
Under the scarlet moon
FFR Simfile AuthorFFR Veteran
 
AutotelicBrown's Avatar
 
Join Date: Jan 2014
Age: 26
Posts: 813
Default Re: [Serious] User Interface Class Final Project

Best of luck turning in your project.
AutotelicBrown is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump



All times are GMT -5. The time now is 12:37 AM.


Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Copyright FlashFlashRevolution