A Conversational Interface Convention
Over the last few days I have been thinking a lot about a possible interface convention. So far, I have come up with one possibility, which I will call a conversational interface convention. The idea is that Charlie talks to the user, and the user replies. Let me illustrate.
Here is what an administrator would see if she logs into my own website and navigates to an article page. The dog avatar is not what I would use, but I like the casual illustration style of Steve Barr. The avatar always provides feedback on what is happening. If an AJAX-type callback is in progress, the avatar would say something like, “Please wait while your updates are saved.” Following the speech bubble, the user can say what she would like to do in response to what the avatar has said.
If the user clicks the Edit button, the process moves into Edit mode and the user will see the following page.
While it’s not especially relevant to the topic at hand, I envisage using MarkDown.NET rather than a rich text editor, but I’ll talk about that at some later point. What is notable is that the speech bubble has been updated, and the user has new options. If the user updates the content, she clicks the Preview button. The process moves into Preview mode, and the user will see the following page.
What you may notice is that the process is presented in a Wizard-like back and forth series of pages, but without the limits of a true Wizard implementation. The same conversational interface convention extends to other parts of the administration pages, such as the Control Panel:
What I like about this interface convention is that it puts into action the two decisions made about the ghost in the machine. That is, Charlie is given a friendly face and is brought to the fore. (Again, I would not actually use a dog.) Additionally, each button press results in a consistent and predictable full-mode change. The ability to have the avatar provide feedback, and then show the user a list of possible responses, is very simple yet infinitely flexible. This interface convention could, I believe, be extended to every possible administration page.
This is just the first interface convention that has occurred to me. I felt that creating a rough draft in Photoshop would provide a “taste” of the idea, and allow my pending interface research to have a point of reference. Even better, I’d love to know what you guys think of the concept.
by Alister Jones | Next up: A Word from Joel - Part 1 →
----
I like the conversational idea. It is a good way for users to get used to working with your application. They won't get confused seeing a lot of options that are not important for the step of the process they are on. The users might get tired of it though after they know how everything works. You might need beginner and advanced modes. And the advanced mode should probably be able to change some of the opinionated settings you wrote about earlier.
The preview mode is not 100% representative of the page since the helper is taking up part of the screen space. So you might need the ability to tuck it away somewhere somehow so the user can see the whole page the same way the site visitors do.
Thank you for your feedback. I really appreciate it.
Regarding the beginner and advanced modes, I have indeed considered that. I am loathe to create two separate interfaces, but I am considering introducing a simple CSS stylesheet switcher. If the user clicks on a link named, "I'm with you already; hide the dog," the alternative stylesheet will hide the dog and some of helper text.
I'm not too worried about the preview not being 100% representative, provided that there is a clear demarcation between the admin section and the webpage itself. That is why I introduced coloured lines between the two areas. Still, you may be right, and my interface investigations are continuing.
Post a Comment