views:

262

answers:

10

When you to develop web applications from scratch, what are the skills needed, to produce usable and interaction-rich products?

  • Do you do UI Prototype first?
  • Do you use User Stories?
  • Some agile methodology or best practice you'd recommend or actively advocate?

In short: What skills make you transcend from requirements gathering to AmazingWebApp™?

Finally: Any books you'd recommend?

+2  A: 

A good sense of design. This is a hard thing for a programmer to grasp. Sometimes a programmer will have a good sense of what works, but not how to create what actually works best or well. Mainly it requires the ability to take everything and be willing to move it around at free till something just clicks as working.

The way I do it is to find out how if someone where to do it what would be the most logical and common place idea of how a task would be accomplished online or offline, then see how to replicate that. Think short, brief, clear, accessible and logical. If you can hand it to someone without any directions and they can do everything that you want them to do and more it works. If they need to have directions to do everyday stuff on your app, it's a bad design.

I would also say take a look at other apps that appeal to you on a level you may not even realize but just work for some reason and try to replicate that.

jtyost2
Very good insight!
Camilo Díaz
+3  A: 

I think the best thing you can do it to simply use the software..

When I am working on apps, I tend to email them home at the end of the week (sometimes sooner) get away from "work mode", install it as normal (i.e. not run from your IDE) and then use it..

It's hard to step away from "test mode" and actually "forget" you know the application.. But once you get in the swing of it, it can be REALLY useful, and very eye-opening (and yes, sometimes heartbreaking when you realise that "cool little feature" actually sucks ass and needs to be reimplemented!).

My boss says I am "anal" about usability. I like that :)

Rob Cooper
+1  A: 

Some type of visual prototyping (even if it's done with HTML and CSS) is best, I think. My temptation is to start coding and worry about the interface later, and that's usually what leads to something sucking really bad (for me, at least). I develop this ©WONDERFUL FUNCTIONALITY and I end up rushing the interface so that I can quickly have the tools to get at my code.

I forget where I heard this, but, to the end user, your interface IS your application. If you're trying to please the user, you should start with the interface and let it dictate the functionality that you will provide.

Brian Warshaw
A: 

Has anyone seen/used this tool for prototyping? www.axure.com

Webjedi
A: 

Some of the things we do:

  1. Lot's of prototypes, exploring different concepts both on paper, in photoshop and sometimes actual implementations
  2. Trim things back, be iterative. Don't try and get the entire app done and perfect the first time around (because you know in your heart this isn't going to happen)
  3. Clarity over cleverness, this is one of my latest things that i find myself asking when doing user experience work, sure icons and spinny things might look great, but are they clear and concise
  4. Focus on user goals, it's a pretty common tendency for developers to focus on one screen at a time, one task at a time. Remember that's not how someone using your application thinks, they have a goal in mind so try and get yourself into there head as much as you can
  5. Use the software you are building as much as you possibly can, there is no better way to see it's fault's, shortcomings and problems then to experience them yourself.
jonezy
A: 

@Brian Warshaw - i think that was from a talk aza raskin did, this video i think

jonezy
A: 

Designing a completely innovative UI is pretty hard for most programmers (is it just me ?). What I find useful building / designing UI for web apps is always look out for a nice, easy-to-use and elegant User Interfaces you find while browsing the internet or using any other desktop apps. If you just find the most efficient UI (designed by someone else, at some other place) for the task at hand, then you can do a good job of implementing and creating a better user experience for your app. For example, as I am typing this answer, I like the way it shows a real-time preview of the answer, with an option to 'hide preview' - I would definitely want to use similar type of interaction while building a user forum interface.

+1  A: 

Best practice depends on the talents of the team members.

First, always write user stories (make it a team event, if possible), load them up in LighthouseApp.com or your favorite ticketing system -- just the first 10-20 are all you need to get rolling.

If you have a UI designer, a prototype of the pages can be useful. But, if the software developer has decent HTML/CSS skills, I prefer to get to a working prototype with clean UI/HTML/CSS as rapidly as possible. This output could be handed to a "modern web designer" who can rework/decorate the HTML/CSS. The designer should work on same codebase as developer via source control system.

Some "older school designers" would be offended at the suggestion that they "decorate the site" and would insist on handing a programmer a photoshop file. This might be OK for a simple marketing website, but I don't like the process for building an AmazingWebApp™

ryw
A: 

Figuring out what you're building and what your product represents is a huge key to building a successful application. I recently wrote a blog entry on requirements gathering that talks a bit about this. You can read it here: How to improve your requirements gathering skills.

Also, here are some high level principles that I follow to make sure I build the right product with a delightful experience:

Know the difference between the user and the customer. The business owners that approve the shiny project are usually the customers. However, a devastating mistake is the tendency to confuse them as the user. The customer is usually the person that recognizes the need for your product, but the user is the person that will actually be using the solution (and will most likely complain later about a requirement your product did not meet). Go to more than one person

Because we’re all human, and we tend to not remember every excruciating detail. You increase your likelihood of finding missed requirements as you talk to more people and cross-check.

Avoid specials When a user asks for something very specific, be wary. Always question the biases and see if this will really make your product better.

Prototype Don’t wait till launch to show what you have to the user. Do frequent prototypes (you can even call them beta versions) and get constant feedback throughout the development process. You’ll probably find more requirements as you do this.

Tawheed
A: 

the guys here are giving excellent tips.

there is a distinction between 'visually pretty' and 'functional' (or ease of use). you can actually have one without the other. this forum is a good example, it has very high usability but frankly is butt-ugly - sorry stacks, i still love you though :)

the reality is you need skill to make good interfaces. this comes with years of practice. i am commonly contracted to come in and design the entire UI for a new app. i rarely see programmers or graphic designers with these kinds of skills (its a narrow market). i found at uni i had a natural acumen for HCI, UI design and usability analysis. i developed these skills further by doing a lot of reading and picking up experience by doing a lot o f ui design. so, all im saying is, get ready for some hard work if you are serious about becoming good at ui design. you can do anything you set your mind to, but if you are spending time studying ui design, that means you arent spending time learning agile with ruby on rails, or whatever the trendiest technology is.

a few general tips:

  • if you are building web software apps (as opposed to small business presence websites), then lo-fi prototyping is excellent. get a group of people together, a stack of butchers paper and colored markers, and you will be amazed at how many screens you can sketch out in a few days.

  • your software should be self-apparent. your software shouldnt need a user manual. the CMS i developed has no user manual, i have a few dozen customers that use it and none of them have ever asked me for a manual.

  • watch what the 'big boys do'. if ebay has their search box like this: '[......] (Search)' then do yours like that too (rather than the non-standard but ok: 'Search: [......] (Go)'.). this is known as affordance. you are using peoples familiarity with other systems to give them a kick-start on how your own system works.

i would recommend this book:

i also have a few blog articles which should help:

louism