Latest Jeff Atwood (Coding Horror) Column: UI-First Software Development

Jeff recently quit his day job, but thankfully his Coding Horror columns are going strong.

His most recent one is about the importance of prototyping a user-interface design before you start coding.

Before I write a single line of code, I want to have a pretty clear idea of what the user interface will look like first... Of course, UI is hard, far harder than coding for developers. It's tempting to skip the tough part and do what comes naturally -- start banging away in a code window with no real thought given to how the user will interact with the features you're building.

Remember, to the end user, the interface is the application.

I agree completely with the idea of prototyping before coding.  Personally I've found that the best way to design a program, especially if you are collaborating or working for a non-programmer, is to actually imagine the program is done, and walk through it's use.

However, I do think something needs to be added.  Speaking from someone who has fallen into this trap before, it's important to realize that although "to the end user, the interface is the application", as a coder you should as much as possible separate the user interface from the guts of the application.  The user interface should be a light wrapper around the main code -- don't let it get it's hooks in too deep or you'll find that maintaining the code becomes that much more difficult.  The "model-view-controller (MVC)" approach is a sound one, it advocated separating a program into a front-end view (the user interface), the main program logic (the controller), and the components dealing with any stored data (the model).

So yes, by all means prototype programs before coding -- walk through them with a focus on how the user interface would actually work from a users standpoint.  Then once you have that done, step back from the user interface and figure out how to code your program in a way that makes the user interface a thin (easily replaceable) layer.

http://www.codinghor...archives/001091.html