Designing Web Interfaces

Bill Scott, Theresa Neil

Mentioned 4

Provides information on designing and implementing effective user interfaces.

More on Amazon.com

Mentioned in questions and answers.

Are there any well-studied design patterns related to drag & drop and mouse gestures? Consider a canvas containing objects in a parent-child hierarchy with a certain layout. Some objects can be dragged and dropped onto other objects using the mouse. In addition, objects can be resized and moved with the mouse.

Different hot-spots on objects behave differently depending on user state (dragging, selecting.) For a drag-drop operation, some elements are: 1) Visual feedback to user for source object 2) Visual feedback to user during drag 3) Drop area detection 4) Drop compatibility tests 5) Drop action

The standard API's tend to combine these into fairly monolithic code.

Additionally, gestures such as movement and resizing have certain elements in common: 1) Visual feedback to user when the mouse is in a resize/move region 2) Visual feedback during a move/resize operation 3) Completion/cancellation of operation.

The question is, is there a way to do this that streamlines the code, separates the visual and document level responsibilities, and possibly much of this declarative?

Determining whether the point under the mouse is a drop target, for example, might use some form of hit-testing combined with the Chain of Responsibility pattern.

I feel there must be good design patterns that bring discipline and organization to this otherwise messy problem.

Cheers,

To answer my own question, Chapter Two of this book has a very relevant discussion: http://www.amazon.com/gp/product/0596516258.

However, this is still not as declarative or well factored as one would like.

I am an experienced programmer, and I have a few little ideas that I think would work really well as PHP based web applications. I have no problem with learning PHP, mySQL, etc, but I do have a problem with the design of a webpage in itself.

I am used to interface design ala Interface Builder and Swing, where there are some clearly defined classes with clearly defined behaviors etc. To me, web design is the wild west where I have to write my entire user interface, complete with little effects and stuff, on my own.

I'm not afraid of this by any means, I just need some advice on where to start. I've like to learn some proper HTML for starters, since everything I know how to do is static and ugly, and I'd like to learn Javascript to be able to make my pages more elegant as time goes by.

In short, I'd like it if someone gave me a few books or suggestions on how to make the programming that I know and love more visible and accessible to internet users.

CSS Mastery is my go-to book for any css/html problems I may have. It works in detail through common elements you may have to create, such as: forms, tables, general layouts etc and suggests solutions based upon standards compliant CSS/HTML.

For JavaScript check out JavaScript with DOM Scripting and AJAX.

Note: As soon as you're comfortable with JavaScript it's worth looking at jQuery or one of the other many JavaScript libraries that take away the headache of cross-browser compatibility.

There seems to be an emerging software architecture where there is some service hosted on a web server which has multiple access points either via a web browser or mobile app. An example would be Facebook or CNN.com. Some may refer it as the "cloud" or "Software as a Service." Having only done low level embedded C++, this area is unfamiliar to me. I want to the best practices of this pattern enough to try it. I looked at Web Architectures and Designing Web Interfaces but I'm not sure if they are exactly what I'm looking for. Which would books would you recommend?

Which up-to-date books can you recommend when it comes to usability and interactions on webpages?

And which tools do you prefer for creating wireframes and why? (Hotgloo, Axure, Visio etc)

One good and detailed book about web interactions is this: O'Reilly's Designing Web Interfaces

My favourite wireframing tool: whiteboard. You can erase, collaborate easily + I get better ideas when standing.