I’m pleased to announce that another of my long-term projects has launched: the latest redesign of the University of Texas School of Law website. This was the first major refactoring of the information architecture, HTML, and user interface of the site since 2003, and is a significant departure from the visual refresh of 2005. (My other major project was the new UT Law Events Calendar, which launched on the same day — it’s been a busy summer!)
The UT Law site holds anywhere between 3500-6000 pages (depending on how you want to define a “page”) spread amongst dozens of departments and organizations, with very little of the content in a CMS of any kind, and it’s accompanied by a dozen or more in-house custom applications written in three or four different programming languages, so this major change to the code was quite an undertaking. After consulting with our stakeholders, conducting some user testing, and evaluating other top-tier sites, I began the redesign with the intention that we’d need a great foundation to build off of, while retaining enough visual familiarity to the old site to not confuse our users needlessly.
Highlights for this project:
- Brand new HTML5-based templates using clean, semantic markup with hooks for a flexible (but optional) grid-based CSS layout system
- Completely redeveloped visual design, color scheme, and branding, with improved typography and layout
- Newly designed universal UT Law header and footer, improving usability while taking up less vertical real estate
- Standardized look-and-feel for internal law school departments and organizations, along with cleaner information architecture (many URLs have been shortened considerably)
- Easier navigation through simplified, consolidated landing pages
- Google Custom Search Engine integration available across the entire site, letting users search without leaving the UT Law site
- Google Analytics’ new asynchronous code now site-wide, including subdomains, with dual tracking to forward stats on to the main campus Development office
- Lighter HTML, smarter handling of cacheable resources, and browser throughput performance tricks give end users much snappier page load times (who loves image spriting? I do!)
- Universal use of UTF-8 for better foreign language and other specialty character encoding support
Much work remains, however: the content across the site is currently being reevaluated as part of this project, and we will be working hand-in-hand with each department to ensure that the offerings are up-to-date, relevant, better organized, and more media-rich (where appropriate). Also, the homepage is a temporary placeholder while we work with our communications office to develop new material and focus this Fall semester.
Many thanks go out to my supervisor Mark Gunn, teammates Austin Kleon, John Croslin, Brian Borowicz, and awesome student worker Laura Davila for helping with the porting and making sure that everything looked as snazzy as possible for the launch date!
For the past six months my co-worker John Croslin and I have been hammering away at this project, and it’s finally launched: the new University of Texas School of Law Events Calendar. After comparing many popular (and not-so-popular) open source and commercial calendaring projects, it was determined that none of them fully met UT Law’s specific needs and infrastructure, so we tried to figure out which features worked best in each, and started from scratch.
On the surface, the public view has all of the trappings of a fairly generic calendar (grid + list views, date-based navigation, multiple “calendars”, iCalendar downloads), but behind the scenes there’s a fairly impressive feature set. A quick list of what’s going on:
- Entire system designed and built from the ground up, using cross-browser-friendly HTML, CSS, and a dash of jQuery
- Object-oriented PHP with an Oracle backend (which is what we’re running now, but it could be modified easily to use MySQL or PostgreSQL instead)
- Custom workflow routing that hooks into our faculty / staff / student directories and makes efficient use of our special events and media services departments’ resources (if an event requires catering the system notifies our Special Events department for approval, student-submitted events are first screened by the Student Affairs Office, etc.)
- Recurring events are possible with more flexibility than what’s found in Outlook: you can edit most of an event’s details without requiring the removal of the whole series, and you can choose whether changes affect only the single occurrence, if changes ripple forward, or if the changes ripple to all sibling events in the series
- Integration with our Exchange server via Exchange Web Services to provide room availability (free/tentative/busy) info to users when creating new events, to help with room selection
- “Pretty” permalinks that are navigable for all calendar views (for example /calendar/today/ lists the current day’s events, /calendar/2010/08/ displays August, 2010, in a monthly grid view, /calendar/2010/08/faculty-events/ narrows that further to faculty-specific events, etc., and using the date navigation controls doesn’t kick users out of the specific view)
- Coming real soon: iCal/RSS feeds, embeddable calendar widgets, better Exchange integration, mobile views, and more
One week in, it’s already shaping up to be a very useful resource for our users. We might have the code available as an open source download at some point, especially if there’s interest in adapting or extending it. If you’re looking for something right now, you might be interested in the great work being done with UNL Events Publisher and Bedework, two open source projects I took inspiration from. Otherwise, feel free to take a look at what’s happening at UT Law!
Working over the past few months on a fairly large web application with a lot of moving parts, I’ve been doing a lot of thinking about abstraction in the design process, about how best to break it down so that my co-coder and I don’t go crazy wrestling with the complexity. Thankfully, I found a book written over 40 years ago that addresses these design problems directly, in a formal writing style both lucid and technical.
Patterns and models
Christopher Alexander, the architect and theorist best known for popularizing the pattern language method of analyzing design problems, wrote Notes on the Synthesis of Form in 1964, when he was 28 years old. The book was hailed as a breakthrough in design theory, but it also quickly gained notoriety in computer science, as the pioneers in that field recognized that the framework could be adapted to the nascent language structures they were developing (Alexander’s later book A Pattern Language is cited as one of the most influential works leading to the invention of modern object-oriented programming). Instead of a bottom-up approach that seeks to gather existing pattern recipes from those working in the field, Notes outlines a process by which you can methodically break a problem into related sets of diagrammed models, yielding a top-down solution.
To understand the human body you need to know what to consider as its principal functional and structural divisions. You cannot understand it until you recognize the nervous system, the hormonal system, the vasomotor system, the heart, the arms, legs, trunk, head, and so on as entities. You cannot understand chemistry without knowing the pieces of which molecules are made. You cannot claim to have much understanding of the universe until you recognize its galaxies as important pieces. You cannot understand the modern city until you know that although roads are physically intertwined with the distribution of services, the two remain functionally distinct.
One of the comforting sentiments in the book is his recognition that individual humans are unable to intuitively solve complex, modern problems without a visual model or mathematical structure to illustrate how the individual components interrelate (Alexander includes some nifty diagrams and sketches throughout the work). The epilogue of the book states his focus succinctly:
My main task has been to show that there is a deep and important underlying structural correspondence between the pattern of a problem and the process of designing a physical form which answers that problem. I believe that the great architect has in the past always been aware of the patterned similarity of problem and process, and that it is only the sense of this similarity of structure that ever led him to the design of greats forms.
A design problem is not an optimization problem
A basic tree of possible requirement sets for a kettle
His approach to design is essentially from the negative: given the yin-and-yang interplay of form (e.g. ‘teakettle’) and context (e.g. ‘person wants to boil water for tea in a kitchen’), the best way to the design the form is to develop sets of intuitively clear misfit variables, binary “good/not-good” properties. He describes this relationship in terms of “goodness of fit”:
Again, it is obvious that a kettle which is uncomfortable to hold causes stress, since the context demands that it should be comfortable to hold. The fact that the kettle is for use by human hands makes this no more than common sense. At the opposite extreme, if somebody suggests that the ensemble is stressed if the kettle will not reflect ultraviolet radiation, common sense tells us to reject this — unless some special reason can be given, which shows what damage the absorption of ultraviolet does to the ensemble. […] A design problem is not an optimization problem. […] For most requirements it is important only to satisfy them at a level which suffices to prevent misfit between the form and the context, and to do this in the least arbitrary manner possible.
Potato peelers and pruning shears
One of the crazier diagram sketches from the book's appendix, depicting an optimal layout for a rural Indian village that was planned by Christopher Alexander
If you’ve seen Gary Hustwit’s documentary Objectified, about industrial and product design, you might remember the segment about potato peelers and pruning shears. The designers relate that in their work they seek out the “outliers” first, in this case that these tools need to be comfortable and usable in the hands of a hypothetical elderly, arthritic mother. If you’ve baked in that level of accessibility into your design, then a fortiori you’ve already solved much of the problem for the rest of your users.
In the field of web design and development, this is implemented as progressive enhancement, layering additional presentation and functionality layers on top of an already well-formed, accessible system.
Alexander’s method of breaking down the problem into functional sets makes it easier to recognize these widest-angle “misfit” outliers, and to design with them in mind from the outset, before you begin to design the actual physical form of the building, city, software, etc. If you apply this approach to all of the other aspects of the problem, an individual designer can achieve a solution that is inherently simple and orderly, rather than having to prune down and optimize a cumbersome structure. He makes a compelling case, and I see myself doing a lot more up-front consideration before jumping into my next large project. One final quote to tie things together:
Consider the design of the now familiar one-hole kettle. The single wide short spout embraces a number of requirements: all those which center round the problems of getting water in and out of the kettle, the problem of doing it safely without the lid’s falling off, the problem of making manufacture as simple as possible, the problem of making manufacture as simple as possible, the problem of providing warning when the kettle boils, the need for internal maintenance. In the old kettles these requirements were met separately by three components: a spout for pouring, a hole in the top for filling and cleaning, and a top which kept the steam in and rattled when the kettle boiled. Suddenly, when it became possible to put non-corrosive metals on the market, and cheap, available descaler made it unnecessary to get into the kettle for descaling, it became apparent that all these requirements really had a single center of physical implication, not three. The wide spout can be used for filling and pouring, and as a whistle, and there is no top to fall open and let scalding water out over the pourer’s hands. The set of requirements, once its unity is recognized, leads to a single physical component of the kettle.
(Image at top adapted from photo by Flickr user Todd Ehlers)
