Friday, July 12, 2013

Some websites in higher-ed that I admire for their usability, design aesthetic and use of technology

My Design Sensibilities

My design sensibilities and ideology can be best summed up in the words of these great designers. As many of us, I may not have completely achieved these in the past, but my goal is to embody these in my current and future work and I find it refreshing that the current trends (and I don’t mean “flat design”) in web design seem to be on a similar path as well.
Minimalism is not a lack of something. It’s simply the perfect amount of something.
Nicholas Burroughs
Simplicity is not the goal. It is the by-product of a good idea and modest expectations.
Paul Rand
We don’t get hired to make pretty things or win design awards. We get hired to solve business problems.
James Bradley
The problem contains the solution. Michael Beirut

I think of good presentation/design as not something that just looks pretty/fancy or flashy but one that is aesthetically pleasing with good use of white space, typography, hierarchy, while conforming to web usability, accessibility (especially important in edu sites) and to new knowledge and developments in the field. These websites offer creative solutions to challenging issues particularly encountered in mobile and desktop.
NOTE: I am not the designer, developer of these websites, just an admirer and a learner.
As you may notice most/all of these are responsive websites, optimized to various screen sizes: desktop, tablets and smart-phones.

Carnegie Admissions website
  • Highlights their main features without the use of a huge auto-forwarding carousel (which are known to have several usability and performance issues based on latest data). Also the previous and next buttons for features are clearly shown to explore more, although they could be a bit more prominent.  
  • Great use of space in back pages with prominent and clearly defined headers embedded within great visuals serving two purposes, conserving space and to define the feel of campus with relevant graphics.
  • Responsive website; Scales well on all screens; Search is prominent and clearly defined to chose CMU or admissions site. FAQ, status and contact are easily available on top.
  • I like the ‘tag it’ feature to bookmark pages while browsing and to go back to them for review.
  • Social media shares are always available while scrolling. I wish there was an Apply now button included in the same way, available right when needed.
  • Good contrast and buttons nicely optimized areas for touch targets. The font-size in the copy could be larger esp. important for mobile.

Information Services at MIT

  • As we know, IT websites have the challenge of having to handle a huge amount of content and information to varied groups of users and this website does a great job of presenting such a scenario in a clear and non-confusing way, delineating by color, typography, icons and even gives an option of audience based navigation in the footer. It also handles the dropdown menus very well in the desktop site, narrowing down the options right within content area in the mobile screens.

Boston University Today (their news website)

  • I love it when websites that handle large amounts and varied types of content do a great job in making the website look simple and uncluttered.
  • A great balance of visuals and copy.
  • Great typography and hierarchy and use of white-space which hits the sweet spot to make each section stand out very well.
  • I like that the main image is not a carousel/slideshow and doesn’t take up humongous amount of space but offers to view more of those.
  • A beautiful understated, minimal and very well done design and layout! The light colored theme helps maintain the minimalistic feel and clarity.
  • Didn’t Like: Light blue in links is not a good color for readability (Jared Spool on usability) and it is better to use a much darker blue for links.

Stanford’s Do Research Website
  • Having worked in the research office, I love how the website has consolidated the most common administrative and financial aspects encountered by researchers and presents a large amount of content in a non-overwhelming way with well defined and clear areas to expand content… Progressive disclosure in the right context is good (users get overwhelmed by too many choices presented all together).
  • Love how the most important, funding and contact area is clearly visible with good white space and separation as are the tabs with How to etc. items
  • Good use of breadcrumbs on the back-page and I like how it shows check boxes to show relevant content for the user in context.
  • Didn’t Like: I am dinging points for low contrast in the top-nav which is not good for accessibility (although it becomes clearer on hover) and the pop-up image-content light box is not fully readable on tablet. I can suggest a better responsive lightbox.

Great content and digital publishing

Engaging Content

The Duke research website, is one of my old favorites for great engaging content on a website providing a variety of options in multi-media content for the user… videos, slideshows, blogs, features and even faculty blog-rolls for the users to explore. Although it can improve upon its design, I love it for its variety and engagement.

Digital Publishing

With the future of print magazines questionable, Journalism Students at University of Oregon have shown to be early adopters by making the plunge to Digital Publishing (starting several years ago) and have created a digital magazine of their own with engaging digital multi-media content (not pdfs embedded on web) by collaborative effort of senior students working together as their class project. I had an interesting discussion with their professor and learnt more about their process. This is created as an interactive ipad app with a collection of a set of magazines created by the students each year/semester and is done completely in the Digital Publishing Suite (DPS) of Adobe Indesign.

Boston Research Magazine

Boston Research Magazine has another take on making the magazine responsive and web based v/s the ipad app approach of University of Oregon.

  • Note: I specifically prefer the 2011 magazine layout v/s the 2012 as there are several accessibility issues (low contrast) in the 2012 version: The main image in that issue being a bit overwhelming, taking up a lot of real-estate on the desktop version of the home page.
  • A great desktop and mobile solution combined into one good responsive website. Great use of typography, hierarchy and color for delineating their content. Good graphics.
  • Scales well on mobile.
  • I like how the navigation is at the bottom which is known to be ideal for mobile and also works great on desktop making it quicker to get to.
  • Good clear hints for side-ward exploration of more articles (arrows).
  • Didn’t Like: Copy needs to be bigger for accessibility reasons and on mobile.

No comments:

Post a Comment