A look inside the flaws of UW Ace (Angel)

UW Ace (Angel learning software) makes for a great case study on how not to build an online application. Below I focus on its follies and try to get to the real root of the problems. While you're reading this remember that this is a large company, presumably with software developers, and testers. You also pay for this application with your tuition. These aren't small problems, they are wide spread. Their design decisions effect hundreds of thousands on a daily basis.

Bookmarkable Pages

A single document written by Tim Berners-Lee details the real root of many of Angels' problems; improper URLs. The inability to bookmark a page in Angel means if your session ID gets invalidated (a common occurance) you are taken all the way up to the root of the website, no matter how far you've drilled down prior.

If the URL contained information about your location within Angel, then it could be used to take you somewhere after you finish your authentication (think Facebook). Imagine for a second, if every time you logged into Facebook you were taken to your profile, and there was no way to send a link to a friend, or bookmark for later consumption. That would suck – and thus the suckage of Angel follows.

Page structure

Divitisthe condition suffered by webpages who's authors use <div> tags too frequently. How many div's do you think the highlighted section below requires? Two for each of the modules (8), one for each graph (4), one up top (1), and perhaps two more to columnize the modues (2). 15 sounds reasonable enough.

divitis screenshot contains 328 divs

Actually, square that guess then add another 100 for good measure! There are 328 div tags used to create that portion of the screen. The main content is nested 10 divs and 2 tables deep. Someone obviously doesn't understand the concept of semantic page structure, nor how to properly use CSS. Take a look at this code snippet and see if you can tell what it creates:


...
<div class="minwidth"></div>
</div>
</div>
</div>
<div class="box_bl">
<div class="box_br">
<div class="box_bottom"></div>
</div>
</div>
</div>
<div class="box nuggetBodyBox">
<div class="box_tl">
<div class="box_tr">
<div class="box_top"></div>
</div>
</div>
<!--top-->
<div class="box_left">
<div class="box_right">
<div class="box_middle">
<div class="minwidth"></div>
<div class="nuggetBody">
<div class="normalDiv"><small><span class="descriptionSpan">There are no bookmarks to display.</span></small></div>
</div>
<div class="minwidth"></div>
</div>
</div>
</div>
<!--middle-->
<div class="box_bl">
<div class="box_br">
<div class="box_bottom"></div>
</div>
</div>
<!--bottom-->
</div>
</div>
...

It simply outputs "There are no bookmarks to display." nothing more, and no less. In the midst of all those divs they couldn't even find one to latch some CSS on to decrease the font size. Instead they opted for inserting a <small> tag around the content. By now you should be thinking "I can't believe Ace isn't down more than it is!".

Graphs

Graphs, with their infinite power to draw attention often hold relatively small amounts of useful data, or mean nothing at all. For the student viewer, each of the graphs pictured below are completely useless and would not be missed. Up until a few months ago, the graphs actually plotted the days activity followed by the next 6 days (which are always 0... cause it's the future). Now, lets take a closer look at what they are plotting.

useless graphs
Logons
Provides an accurate view of the number of times Ace has kicked you out to the login screen. Useful for calculating the time you've wasted on Ace each day.
Mail Messages
Zero, perpetually. I use this thing called email, thanks.
Discussion Posts
How about showing me how many posts other people have made. How many are new? Unread? Have mine been read? You know, something... useful?Submissions
Just incase you forget how many projects you did this week.

Navigation tabs

Resources

In case your having trouble finding Google or Wikipedia online they've created a page with a search box for both in n convenient locations (where n is the number of courses). It is buried under one login page and 3 navigational clicks. Oh, and each course has their own unique combination of these services. Some have Wikipedia, some don't. This might be speculation, but I bet this is a big selling feature.

Calendar

All those activity graphs we saw earlier should really look interesting when plotted on my calendar. Wait, they're not shown.

All of my assignments on Angel have due dates. I know this well because half the time it messes them up and prevents people from submitting. Calendar must be a quick and easy place to see what you have due in the next few weeks. Nope, my calendar for this week (and all weeks) is empty, despite three assignments being due in ACE this week alone.

I might be willing to forgive them for all that if they let me import my calendar into Outlook or Google Calendar. Maybe importing or exporting via the hCalendar microformat? Nope, no such luck. How about importing my class schedule from another source – that way I could budget my time and projects together. Nope. Still haven't found anything that Calendar can actually do.

Report

The report tab was constructed by people much too familiar with early M$ office products. 3D Graphs, diagonal gradient background fills, drop boxes with only one option, and seemingly infinite number of radio buttons which lead to empty reports. This feature was driven by the need to fulfill the vision of this power point graphic, I guarantee it.

so many choices

Proprietary storage - The sales pitch

Let me pitch you a product, if you're interested I can help hook you up.

My application stores all types of information, including email, newsgroup messages, grades, assignment submissions, and course information. This application makes pretty reports circa 1999 – which makes it really easy for teachers/professors to see just how badly their students procrastinate. This application stores all the data in a proprietary format developed specially by my company, and likely has no formal documentation. The application runs in your browser, so it always up to date.

There is no way export data from my application. If a new browser comes out that is not supported by my application you must not upgrade, because it might not work. Even if the browser has been available to my company for developement purposes 4 months before it's release, don't upgrade. If my company never updates it, you're screwed. When my company is eventually made obsolete by software developers who know how to write web applications that are reliable, fast, and don't use 385 divs where 15 will do, we will shut our doors. Your data is still on your servers (don't worry), but it won't work with any of the normal tools such as email clients, calendar applications, or be of any use as reference for future classes. Effectively, every piece of data you put in will never come back out. Its' value is directly proportional to the time left in the term. In essence, all data will expire within 4 months.

Because of this, all marks will need to be input both on my application and on your own database where you can actually use them for useful things.

Does this interest you? Apparently its very appealing to institutions of higher education.

15 Comments