Many sites on the web are good. They are well-designed, clear, have great information architecture and are easy to navigate. Often, web designers emphasize the “design†part too much, and neglect the other equally important things. However, there are sites which aren’t that aesthetically pleasing, but still are the best sites in the world. They may look like a big, sad bag of wrestling underwear on the outside, but their underlying user experience is really, really refined, and thus makes the appearance part fade away while visiting the site. How and why?
A case study: “Introduction to Computer Science using Javaâ€
I’m studying Software Engineering at Chalmers University of Technology in Gothenburg. We took this introductory course in object oriented programming with Java earlier this fall, and as the exam approached I browser around the web for better studying resources than the course literature we had. I stumbled upon this site:
“Introduction to Computer Science using Java†→
http://chortle.ccsu.edu/CS151/cs151java.html
Mirror: http://programmedlessons.org/java5/index.html
It’s apparently an intro course to Java, given by a Bradley Kjell at Central Connecticut University.
How do you feel about the index page? It’s rather dull and “undesignedâ€, right? We’ll dig deeper, and I’ll show you why this site is so awesome.
Information structure
If you scroll down you’ll see the different parts of the course listed, and each sub-chapter is named so you’re instantly able to distinguish the type of information given in the chapter. I really like the way all the chapters are listed: no complex menus or navigation. Instead, information is presented in a simple and consise way. Simplicity. That’s what the whole web site screams.
Choosing a chapter takes you to a page where the chapter overview is presented: what’s to be covered. Also note the questions at the bottom of each page in every chapter. Those are great for learning; not showing you the answer right away, but instead let’s you ponder over the solution and then check the next page for the seeked solution.
The pages includes body text, tables, figures and code boxes (sample). I want to highlight the recursion section as a great example on how you should construct educational tools.
Features and interaction
- On some pages you’re asked to fill in blanks with expressions.
- Other pages includes interactive diagrams (!) where you click on the image to advance through the steps of the code. If you want to wrap your head around recursion, that method is great for visualizing.
- Choosing the “Home†button at the top and bottom of each chapter page not only takes you to the index, but also to the correct position on the page. I.e. if you’re reading about “Exceptions and IO Streams†and decide to go back and check out next chapter, you won’t end up at the top of the index page. Great user experience.
I especially like the clickable diagrams; I absolutely did not expect a site like this to include that kind of “featuresâ€.
Quiz, Reviews, and Exercises
The site also offers quiz, reviews and exercises as ways for the visitor to test his or her skills in the subject. There’s something with how these parts of the web site are built. Try out a few Reviews and note how the interaction works. It’s a cool concept (good use of Javascript). Stripped to the barebones.
Style of writing
Writing for the web is difficult. You shouldn’t write novels for your visitors, nor write texts with small or no substance. It’s an art form actually: to be able to analyse the context, mood, target group(s), aim, and other scenarios.
I believe our case study outperforms other tutorials or educational sites in writing. There are no long paragraphs of theoretical explanations. I always hate tech articles that have these Wall of Text style paragraphs where just a couple of sentences are truly relevant. That’s not the case here, since all chapters are divided into pages, which each treats a single topic.
Do one thing, and do it well.
Even though I think this technique leads to many mouse clicks on the “Next†button on each page, it helps you focus on a single topic.
The writing is concise and pedagogical. It explains the concepts in images and real world concepts (that actually works). Some stuff that could be tricky for a beginner to wrap his or her head around (as recursion, for instance) are described with sketches, diagrams, and imagery.
Noticed how the author’s personality shines through in the text? There are jokes, analogies, and other things which makes it fun to read. It’s not a dull, grey Java tutorial – it’s a guy tutoring you how to use a tool in the best way possible.
Conclusion
What is my goal with this article? To give an example that surface is not sufficient to make a web site extraordinary. Go watch “Shrek†and it’ll tell you it’s what’s underneath that really counts.
Is our Case Study another sparse, un-designed educational site, or is it a minimalistic, functional, beautifully architectured learning tool?
Mark Boulton and many other industry profiles keep repeating this: design content out, not content in.
Note that this site wouldn’t demand that much work writing media queries for mobile devices, making it responsive, either.
Perhaps web designers and developers should look beyond what’s currently trendy and focus on the message – the content – the cause – the reason. It works for a decade-old computer science course, right?
Design without context is not design. It’s noise.
Source:http://johanbrook.com/minimalism/anatomy-perfect-web-site/
