patternize / patternize.io

Algorithms and Data Structure Visualization 🔬 An interactive E-Book
https://patternize.github.io/
MIT License
41 stars 3 forks source link

Suggestion: short animation and overview changes #11

Open Cheeriostackbpuil opened 4 years ago

Cheeriostackbpuil commented 4 years ago

Comments on subtext and body:

  1. See Pattern - I doubt you'll need to tell the users. Just show them while you're teaching them. By using your site, they'll know. It'll take too long for users to read through each subtext. The images drew me away to think it's clickable. Didn't even really read the subtext.
  2. Create Associations - What is this "associations"? Is it a comp sci term? Or just a term that describes what you'll be doing with the topics? Getting users to think too much before they start, may be a potential barrier. Get them to start learning rather than leading them to invest even more time into feeling out what your site will do and offer. A brief sentence/title is more than enough to tell them what your site is all about. For example, "Learn blablabla. Try bliblibli. " OR something more creative than that, to point them directly to the starting line. (I can try and think of something there)
  3. Think Easy - I like the body. It's clear and I know what this site is all about. Inside, i'm thinking this site will help me understand comp sci more. And I think that's all you need, considering the specific demographics of your users.

    I think it's still a good idea to include what you want to preview for them (what they'll get out of it, what to expect), but that's just too much information to put on just one home page. It'll throw users every which way, and you really can't control what they'll ask and how they are gonna search for your information. So maybe provide a link to a separate page. From my prospective, the main page should only build on one specific idea, not three all at once. Then after the user gets that specific idea, then you can prompt them to "get started". Otherwise the "get started" button doesn't really lead anywhere special in users' minds eye.

    Also, keep the images. They are really good designs. I'd say the first is perfect as data structure icon, second image as algorithms, and third image as Patterns. Maybe a music symbol for language.

Screenshot 2020-01-21 at 13 21 50

Prospective ideas on animation building atop the three existing icons: -Maybe think of a quick shake animation everytime you mouse over the image. But having just this simple animation can be kinda annoying when the mouse is over the image everytime. So I'm proposing once an image mouses over or is tapped, the image ripples outwards a new colour and fills the screen where other text/illustrations can be displayed on top. That'll slow down the user from glossing over everything much too fast. In otherwords, some form of animation that directs their attention to the specific starting point. Think of the intensity cinematography provides in framing a scene to draw attention on a specific object on that screen. Click on the icon again and the expanded text/illustrations will ripple back in, displaying the main page again.