Web Frameworks: Key to User Experience

I ‘ve been working on web applications for a few years now, and while I don’t claim to be an expert on the subject, I have gotten my hands dirty in building apps on all sorts of different web frameworks (about 8 now). After being exposed to the UX community for nearly a year now, I realized just how diverse this group is, though most of us work on UX for websites. I’m curious to know just how much UX people understand web frameworks, and its impact on the web development community.

In this post, I’m going to share a bit about my background as a software developer, in hopes to shed some light on how web frameworks impact UX-related work. My hope is to generate some understanding between the two camps (UX folks and programmers) so that we can attain a common goal, which is to build applications and services that are robust, functional, and satisfying.

Since this post is aimed towards a general UX audience, I’m going to avoid talking about the philosophy and thinking behind UX. I think there is enough literature on that subject for software-types who are interested in UX. Instead, I will talk about the other side of the fence – what are software developers like? What makes them tick? Why do they do the things they do? And why can’t we get along sometimes?

The Philosophy of Features and Functions

In Cooper’s book titled, “The Inmates are Running the Asylum“, he describes developers who commonly make poor assumptions about users, forcing technology on them in ways that cause fustration and confusion. This is partly because of the kind of thinking and immersion that often goes on in building a software application is very counter cultural, and it’s hard to appreciate, let alone design applications for users, while you’re focussing on building applications.

Software developers are extremely technical people, and the whole work of building software doesn’t just include knowledge and skill, but includes other factors such as the culture of working in software teams, physical environments, system-allegiance (open source vs. microsoft, oracle vs. mysql, etc.), organizational structures, the nature of how projects run, and relationships with clients and/or internal staff.

From this tacit and specialized knowledge, software people can often wield enormous influence. It is not difficult to find groups of software people that are isolated or contained, in an environment that they require to do what they feel is needed to build software. Usually, this involves having a computer to yourself, a space that is condusive for software development, some degree of flexibility in terms of work schedules, and close proximity to teammates (though this isn’t always the case, with certain software practices).

A new recruit who is given his/her table in the software group will feel removed from marketing, sales, admin, human resource, and management. There are of course, exceptions to this – but there are many companies that operate in this fashion, and it seems to work fine for a lot of people.

While this kind of environment is good for producing application functionality, it reinforces the idea that functionality is the ultimate goal – thus there is this effort to provide for and manage the production of “function”, since this will dictate the health of the team. Software people are rewarded on producing functionality, after all, and to this end they will deliver. This is why feature creep is so common – software people gain rewards from building features, intrinsically or otherwise.

Frameworks are Bespoke

This is where web frameworks come in. Because of the increasing demand for software of all kinds, there is tremendous pressure on developers to build applications fast enough that meet the requirements, and yet robust and scalable. Software teams often use web frameworks to leverage on, because building applications from scratch can be costly and time consuming.

However, while most frameworks are actually built with enormous flexibility in mind, they are actually bespoke (standalone, designed for a specific purpose), and will dictate the kind of thinking and culture that revolves around the building of an application.

One of the first web frameworks that I started using was Apache Struts, which is based on Java. It was an amazing platform that enabled me to be in control of so many things about an application, such as databases, internationalization (multiple language support), file organization, and templating. However, it required a steep learning curve, and once I managed to integrate all my knowledge and build a software, my time was consumed and wrapped up in making sure everything was built and designed with the framework in mind.

I had to be extremely careful that certain configuration files were in the right place, that I didn’t misunderstand the “thinking” behind the Struts framework that governed the way applications were meant to be built on the framework. And because Struts was based on Java, it also had to have a philosophy compatible with “The Java Way” of doing things, which meant that you also needed to appreciate things beyond the framework itself.

When software platforms change, or when teams migrate to different web frameworks, this thinking needs to change. It is almost like a paradigm shift, because Java does not work like PHP or Ruby, and Oracle is quite different to MySQL and so on. So when technologies change, web frameworks follow suit.

This is why some folks advocate that interaction designers and software developers should not be the same person – building software takes up a lot of effort.

Bridging the Gap

Understanding the differences between web frameworks can be a boon (no pun intended) for UX practitioners who work closely with software people. This of course implies that they appreciate the thinking and the culture behind them. The reason why I focus on frameworks and not just any software technology in general is because it’s a very common way of building web applications today, and are the enabling platforms for interface developers and designers – just that they will probably only see the tip of the iceberg through template files (e.g. Smarty templates, HTML, CSS), Javascript and images.

37Signals popularized the notion that “the interface is the application”. This can lead to some serious misconceptions about the way applications should be built. In the software world, the whole is usually more than the sum of its parts. Interfaces depend on not just images, HTML, Javascript and CSS alone, but on the architecture it sits on – database, servers, and very often, the web framework.

Because of this, software developers are constantly aware of the separation between “view” and “logic”, which are synonymous with the relationship between designer and programmer, interface and framework, user and system. While this makes it very clean and organized, the decoupling of these relationships can sometimes create an artificial “gap”, which can lead to animosity between designers and programmers.

This is the point that is most crucial to both sides. Having a shared understanding of how interfaces are designed and how frameworks run will lead to better software. As an example, certain systems are designed to handle textual data better than others, certain frameworks are designed for certain types of platforms (Struts and Spring for enterprise apps, Django for content heavy/layout-based apps), and the way you build an application will dictate the performance of an application on the interface.

This is only the beginning

We’re only beginning to scratch the surface here, since the discussion on what a web framework really looks like and how do applications get built with it will require more time than this post can afford. But it’s a good start, and no doubt UX practitioners and programmers will share a partnership around technologies for a long time to come. My hope is that we’ll be able to build a better understanding of how this partnership can be built, strengthened, and communicated.

References and related links:

Safari 4 – initial impressions

I downloaded and installed Safari 4 Beta and ran it on my Vista-installed laptop.

Performance and Functionality

It takes a bit of time to load up, but seems to run faster than the previous version of Safari. Some bits of Javascript functionality on sites failed to work when I had too much tabs open. I like that the tabs are similar to Mac’s menu that’s flushed at the top, but I don’t like how the tabs are so thin and quite unreadable – hard to tell them apart. When I had too many tabs open the were hard to scroll to. I got used to firefox’s mousewheel navigation when I had too many tabs open on a window.

For some odd reason, when I start Safari up, the window isn’t maximized – which is kind of annoying, but I can live with that.

Favourite/Top sites

If you love Apple, you’ll probably love this. Whenever you open a new tab, it displays a grid of your favourite sites (like the image at the top). It was nice eye candy to start with, but later I wasn’t sure what I’d do with it. And I realized I don’t have to do anything – it kind of ‘remembers’ which sites I’ve been to. I’m not sure if I’m ready for Safari but I guess if I were to use it on a regular basis, it might be useful to have this feature.

I want X feature

I’m still not convinced it’s blazingly fast, so my bet’s still on Firefox. It would be nice to see some hotkey commands, that are straight-up easy to use (key help displayed in menus or what not).

Has a lot of potential.

The value of practice in design methodology

I’ve been exposing myself to more literature surrounding the way design works. In some ways I could call them design literature, but that’s much too broad. Or, I could say it’s about how designers work, but again – not all designers work the same way.

In a way, I’m searching for something about the way design works that’s more tacit – implicit, yet indispensable.

The reason is because working from a methodology or a process vs. coming up with a really good idea isn’t quite the same thing. Speaking to a classmate recently about the way design works, he found it hard to articulate why he designs the way he does. But we both agreed that there are bad designs, and bad designers, and things designers shouldn’t do. And it seems you could put that into a list of things to tick off, but it’s not quite like that.

I stumbled across an article by Michael Beirut on the Design Observer site about his design experience. The honesty in which he admits that design is not too far from a ‘magic spark’ is indeed revealing about the sort of work that goes behind the scenes.

He borrowed the analogy presented by Rob Austin and Lee Devin regarding theatre innovations – how the collaboration of stage crew and artists both handle minute by minute executions within a tightly controlled environment and time span in order to deliver an impact to the audience. The synergy, well-executed, is hardly a random exercise, but isn’t easy to put down in books or spreadsheets.

It’s easy for me to say a piece of software has to be built this way because it requires so-and-so features, but it’s another thing to create something from scratch, and say ‘this is going to work best for the user experience’.

This analogy is clearly based on my own background as a software engineer, and it’s causing me to be more sensitive to how designers learn and apply their “tricks of the trade”. In this sense, Buxton’s Sketching User Experiences book has been extremely insightful – but only if you truly appreciate that what the book is really offering is a peek into the mind of a designer, and not just another tool to whack together a pretty interface.

I’m not discounting the fact that building software relies on tacit and practical knowledge as well, but in the realm of design – this seems more magic than method – hence the question put forth in the ixda discussion board. While good software can most certainly be replicable, can good design be replicable too?

The more I read into it, the more I’m realizing that the answer lies in practice, and the understanding of it.

Serif or not to Serif

I found this article awhile back regarding the use of sans serif and serif fonts.

http://www.alexpoole.info/academic/literaturereview.html

Although sans-serif fonts are widely regarded in its use in webby stuff, that doesn’t mean that a serif font can’t work as well toward building highly legible sites.

The conclusion is obvious – use type appropriately based on your needs.

Other useful references:

Other issues regarding font-use:

  • legibility vs. readability
  • dyslexia / accessibility
  • aesthetics
  • technical boundaries
  • custom fonts
  • internationalization

Vimeo encourages sign-up through comments subtly


I was watching Don Norman’s talk from UX Week ’08, and I’m not a member on Vimeo or anything, but the blurb at the comments section below was really nicely done. It really is encouraging me to be part of this, and this is an interesting example of “persuasive technology”.

For one, it’s almost static. There’s no “wizard of oz”-guy behind the system trying to get potential recruits to interact with the site.

Then, it’s partly contextual – because the video is a conference talk, it makes it even more appropriate to contribute to the conversation (I don’t know if they did that on purpose).

Thirdly, it’s placed appropriately in the comments section, although it doesn’t even say it’s a comments section. How did I know it? Well, I just assumed it. Most of us have gotten to a point of getting used to seeing comments as a trail below the main content. It just got picked up by Vimeo and used very subtly but very aptly.

Although it didn’t sign up immediately (because I wasn’t intending to participate in the conversation), I think someone who was interested in taking part in the conversation would, and that’s the point – making it easier for users to accomplish their goals – cordially, contextually, and effectively.

the iPhone is a “personal” device

As Interaction Designers, we’re always encouraged to appreciate and design for the idiosyncratic user.

However, it’s not always easy designing the occasional odd habit, as human as they are.

I was inspired by Bill Buxton’s Sketching User Experiences to revisit my love for comics. I used to spend hours sketching portraits and making comics and random stuff many years ago, and I regret not practising it enough over the years.

Now that I have a really good reason to sketch, I think I’ll start putting my hands to some small projects like wireframing “classic” websites and product illustrations.

the iPhone is a "personal" device

UX is overwhelming

I am drowning in a sea of stuff! Is it me, or is there just too much information out there about UxD, IxD, IA, human factors, etc. I haven’t even done my first proper wireframe sketch. Maybe I just need to back off for awhile and give myself some tiny projects to focus on, until I get the hang of the tricks of the trade – aka. sketching, prototyping, powerpoint presenting, design, etc.

The more stuff I learn, the more I realize how much I don’t know, the more paralyzed I feel about doing design. It’s worse than having writer’s block. It’s like claiming to know something I absolutely have no clue about, or having all that information in the head and not being able to make sense of it.

I’m learning though. Like, I found post-it notes to be really useful in coming up with rich pictures (something we learnt in Organizational Informatics) and other relational diagrams. I recently used them to produce a diagram describing the various roles, artefacts and relationships at the London Underground. This was produced from textual descriptions of the relationships, but it’s easier to see it visually.

I’m also in the process of downloading tons of podcasts, some of which I can never recall later, but it gives me comfort knowing that it’s there and and I know what Gerry Gaffney sounds like, and what he does, and the same goes for Jared Spool.

I’ve also been twitter-ing a lot, and following the messages posted by some relatively active UX folks. the amount of traffic and information that I get from that is also, overwhelming. I tell myself that being in the conversation pays off, because it somehow comes back to you. Even though I have little understanding of whether ‘leading’ and ‘line-height’ can be used interchangeably, I’m sure it’ll come useful in the future. Note to self: finish the “Stop stealing sheep” book.

And talk about BOOKS! There are so many books to read. I’m now halfway through Buxton’s Sketching book (design), Becker’s Tricks book (sociology/anthropology), and Fogg’s Persuasive Tech book. Not to mention Cooper’s Inmates book which I take on the tube whenever I go to Ikea.

I hope this is just a phase, and that it’ll pass. For now, I may be a subject for sensemaking.