The demonstration for the "carousel" is coming along! Our Flash wizard is working hard on getting it ready for viewing. We've managed to add a few features to it that make it compelling in terms of usability - and having seen the early proof-of-concept, I can say that it certainly has a "wow" factor.
In terms of usability, we have added a "pen" which users can store documents in. From this pen, they can bookmark the lot (and even specify a folder), open all of them in separate tabs, or do what ever they like. I was quite surprised that it looked so good and cannot wait for the finished idea to be released. We will have a demonstration video available.
We are also looking into how to actually program this. It should be possible using some clever Javascript and a database (probably SQLite which is made for tasks like this), and we hope to release it as a Firefox extension. Whether it would be adopted as part of the Firefox core is another matter: Firefox's aim is to be lean and quick and they deliberately don't add extensions unless necessary (shame as noscript is an essential part of my browsing experience!) but they have the job of keeping the browser size to a minimum.
Watch this space for further news as it happens.
19 August 2008
14 August 2008
First prototype
This is the first prototype of the carousel browser history system that we thought of. We hope to have a working demonstration in Flash soon. Yes, it's ugly! But remember that the final version will look better than this version which is only to demonstrate operation.
What happens when the history mechanism is initiated is that the current page (bottom right) zooms back and takes its place here in this line of pages. The line represents the history with pages further back being pages that were visited longer ago. The user can scroll through these pages using the up and down arrow keys. The down arrow key moves the pages down (ie, forwards in time) and vice versa for the up arrow key. Unneeded pages just scroll off the screen. Trying to scroll past the start or end of the list results in the end page vibrating to indicate reticence.
Clicking onto a page brings it to the front of the line so the user can see it in all detail. If the page is already on the front, then a single click loads it. Double clicking goes straight to the clicked-on page.
Why the curved line? Simply because it's continuous and more pages can be put in than with a straight line. Humans are more visual than literal so matching pages with known history is easier this way. The search box pops out whenever the user begins typing and matched are shown with striped red and white borders - this gives an immediate visual cue that should be visible even when people have poor vision. If the user then presses the enter or return key, the pages that don't match slide off the screen leaving the relevant pages. These then collate together into a new line. To go back, press escape or delete the search terms, and the new pages scroll back in. While the search is progressing, unsearched pages become greyed out a little while searched ones pop out.
The yellow star is a bookmark system. Bookmarked pages will have this yellow star attached and dragging the star onto a page bookmarks it. Dragging it off takes the bookmark away. Double clicking on the bookmark star removes all but bookmarked pages. I wonder if there is a way to show their organisation into folders?
I think that this system works because it allows a text-based search but also a visual search. Each page has its top left-hand corner shown which is where organisation logos are normally situated. Visual matching may well turn out to be faster and / or easier than a text search for many people, I would guess much more than looking through a list of page titles.
Plus with well-done animation, it would look quite good.
I was also toying with the idea of forming sets - the user could drag visited pages to a "pen" on the left hand side, and the pages would form a set. This would be useful when collating information. The user then only has to visit a ton of pages and then she can move the relevant pages to the pen and review or save them after the reading task has been done. For this type of task, this method appears to interfere less than saving each relevant page in an appropriate place. Plus of course, all items in a pen can be bookmarked in one go and even put into their own folder.
12 August 2008
A brief worked example
This is a brief worked example of a website design. Surprisingly, there is no usability here but adherence to constraints.
Sticking to constraints is important - if you don't, the site won't do what it's supposed to. Quite simple really.
The site is Blue Zero 2 which I wrote to showcase some of my photographs. There is lots of software out there that does this already, but I wanted to write my own with my own design for my own needs. Plus it was a good chance to re-familiarise myself with the Yahoo User Interface (YUI) toolkit which is an excellent set of Javascript / ECMAScript libraries.
So display photographs in a web browser. Quite simple isn't it? But there are constraints. I wanted the site to be:
The problem is that there are conflicts here: I want visitors to view thumbnails of other pictures, and to view each photograph's information. However, I also want the information to be absent so that the visitor can concentrate upon the photograph.
The solution is to have the information available, but to hide it. With YUI, this is a doddle: just define each information piece as an overlay and hide it - and then give the visitor some way of showing it that's unobstrusive.
The first design is this - it was written in PowerPoint which is a surprisingly powerful prototyping tool. I drew this prototype design up in a few minutes. What we have here is the photograph in the middle of the screen. To the bottom left is a list of "seasons" which contain a new load of pictures, and to the right are some words (from David Sylvian's "Orpheus" which is a wonderful song).
The next stage was to construct a working HTML and CSS model. This would allow me to work out the spacing and positioning of all elements. As you can see from the picture below, it is quite similar though the font was changed from a fantasy font to a fixed-width font.
This is quite close to the original design, but when I used it, I could see that it just didn't work. The song lyrics, wonderful though they were, intruded on the picture. The border was also wrong though it looked better than no border (easily done: just surround the image with a DIV element, and set the DIV's background to white and 5 pixels or whatever space of padding.
The next stage was to drop the writing and show the pictures but another problem loomed up - I had photographs in portrait format - they would either be enormous, or would disappear off the screen!
I had to code some Javascript to ensure that the images would be resized appropriately though I found it best to simply resize the images in photoshop and use a fixed size. This is bad according to many purists, but web browsers are not the best at resizing images. Photoshop or the GIMP do a much better job.
Check out the website for real here.
I also put a column of thumbnails to the right of the picture, but also wasn't sure of how to show the photograph's information box. I tried a link saying "more info..." or "about this..." but both intruded more than I wanted (yes, I required a very minimalist design). Clicking on the photo itself to show the box was another option, but I decided to interrupt visitor's process of viewing the photographs as little as possible by having the information box appear only on a mouse-over event. This means that when ever the visitor places their mouse somewhere over the picture, the box appears.
Using YUI's transitions, the box doesn't just appear either - it fades gently in. The length of fade is 0.8seconds which is far too long for most websites (particularly e-commerce), but for an artistic site like this, it was perfectly acceptable.
tIf you go to the site, you will see that The column of thumbnails has a small arrow pointing left above it. Clicking on this arrow causes the thumbs to slide out of view. The arrow is then changed to one that faces right-wards, and clicking on it again restores the column back again. This is a very unobtrusive control, assuming that the user works out how to use it. The best point is that because the design is so minimal, there is a logo, a menu of seasons and an arrow - there is nothing else to click so clicking the arrow might be expected. Of couse usability testing would find this out, but for my own personal photographic site, I was just happy to finish.
So what did I learn from this?
Firstly that a working prototype can tell you more than a static one - even if it's just HTML and CSS.
YUI is a great tool to work with for more professional looking webapps.
Conflicting constraints can both be met.
Sticking to constraints is important - if you don't, the site won't do what it's supposed to. Quite simple really.
The site is Blue Zero 2 which I wrote to showcase some of my photographs. There is lots of software out there that does this already, but I wanted to write my own with my own design for my own needs. Plus it was a good chance to re-familiarise myself with the Yahoo User Interface (YUI) toolkit which is an excellent set of Javascript / ECMAScript libraries.
So display photographs in a web browser. Quite simple isn't it? But there are constraints. I wanted the site to be:
- Minimalist
- Clean
- Allows the visitor to focus purely on the pictures
- Can access thumbnails of other pictures
- Can have information about the pictures
The problem is that there are conflicts here: I want visitors to view thumbnails of other pictures, and to view each photograph's information. However, I also want the information to be absent so that the visitor can concentrate upon the photograph.
The solution is to have the information available, but to hide it. With YUI, this is a doddle: just define each information piece as an overlay and hide it - and then give the visitor some way of showing it that's unobstrusive.
The first design is this - it was written in PowerPoint which is a surprisingly powerful prototyping tool. I drew this prototype design up in a few minutes. What we have here is the photograph in the middle of the screen. To the bottom left is a list of "seasons" which contain a new load of pictures, and to the right are some words (from David Sylvian's "Orpheus" which is a wonderful song).The next stage was to construct a working HTML and CSS model. This would allow me to work out the spacing and positioning of all elements. As you can see from the picture below, it is quite similar though the font was changed from a fantasy font to a fixed-width font.
This is quite close to the original design, but when I used it, I could see that it just didn't work. The song lyrics, wonderful though they were, intruded on the picture. The border was also wrong though it looked better than no border (easily done: just surround the image with a DIV element, and set the DIV's background to white and 5 pixels or whatever space of padding.
The next stage was to drop the writing and show the pictures but another problem loomed up - I had photographs in portrait format - they would either be enormous, or would disappear off the screen!
I had to code some Javascript to ensure that the images would be resized appropriately though I found it best to simply resize the images in photoshop and use a fixed size. This is bad according to many purists, but web browsers are not the best at resizing images. Photoshop or the GIMP do a much better job.
Check out the website for real here.
I also put a column of thumbnails to the right of the picture, but also wasn't sure of how to show the photograph's information box. I tried a link saying "more info..." or "about this..." but both intruded more than I wanted (yes, I required a very minimalist design). Clicking on the photo itself to show the box was another option, but I decided to interrupt visitor's process of viewing the photographs as little as possible by having the information box appear only on a mouse-over event. This means that when ever the visitor places their mouse somewhere over the picture, the box appears.
Using YUI's transitions, the box doesn't just appear either - it fades gently in. The length of fade is 0.8seconds which is far too long for most websites (particularly e-commerce), but for an artistic site like this, it was perfectly acceptable.
tIf you go to the site, you will see that The column of thumbnails has a small arrow pointing left above it. Clicking on this arrow causes the thumbs to slide out of view. The arrow is then changed to one that faces right-wards, and clicking on it again restores the column back again. This is a very unobtrusive control, assuming that the user works out how to use it. The best point is that because the design is so minimal, there is a logo, a menu of seasons and an arrow - there is nothing else to click so clicking the arrow might be expected. Of couse usability testing would find this out, but for my own personal photographic site, I was just happy to finish.
So what did I learn from this?
Firstly that a working prototype can tell you more than a static one - even if it's just HTML and CSS.
YUI is a great tool to work with for more professional looking webapps.
Conflicting constraints can both be met.
06 August 2008
Bookmarks, history and search
I've decided to write about my bookmarking and history ideas here now.
The conceptual model is that of a carousel. It sounds extremely corny but could be good.
The idea is that a browser's history is stored in a list of each web page visited. This must include pages that were backtracked upon so that reverses in direction are not excluded. This means that a stack model of recalling visited sites will not work.
When each page loads, a thumbnail of the page is taken and stored in the browser's cache. When the user wants to examine their history, the page they are on zooms back slightly to show a long curving line of web pages (i.e., the history). It zooms back to ensure that the user is given visual cues as to where they are now.
The list of pages is not linear as this would be tricky to work out. My own studies indicate that most history searches are for fairly recent documents so these might be best if they are larger than earlier ones. They are also easier to click because they have a bigger surface area to click on (Fitt's law applies here). Obviously, when clicked on, they zoom up to take the entire page.
This is all well and good for selecting recent pages, but what about pages several hundred or thousand items back? Users can scroll along the list - as they go back in time, the newer pages zoom forward and past the users screen and out of sight while the older ones scroll nearer and become larger and easier to view - users can then make better judgements as to content. Scrolling forward in time does the reverse - users then have older pages receding into the distance while newer ones zoom back in to view.
The pages stand upright on a floor - this floor has indicators of date and possibly time. These help to provide a definite clue as to when pages were accessed which may help search. Pages that are bookmarked have a distinctive border that makes them stand out just in case the user wishes to select a bookmarked page. The user can perform a text query on the collection. All relevant documents then "jump up" a little higher than their sisters to allow the user to see which ones match their query along with another distinctive border (though different to bookmarked ones). They can easily select them, but also see them in relation to nearby history. This seems to tie in well with knowledge about navigation and how other pages may indicate proximity to the required target.
When a document is selected, the history will be searched for other times that the same document was accessed and these will also stand out from the others. This may be useful for documents that change and the user requires information only available from an old page.
How does this differ from other ideas?
My idea uses visual navigation. Web pages are also visual which helps matching. The temporal order in which documents were visited are stored. Because the design is not linear, more pages can be fitted onto the screen. There is also a bias in favour of the most recent documents. The exact date and time in which documents were visited is also visible which works better than "hazing" them - this gives a rough indication as to age, but not an exact idea. This differs from the traditional concept of a zooming interface which from my own work has problems of navigation (i.e., people getting quite lost!), confusion with 3d interfaces etc. This has a 3D effect but is actually a tuned 2D search - maybe more like Marr's 2.5D idea of the human visual system. Finally, I think the concept of moving backwards and forwards in time is appealing and easy to understand for most people. With a few jogs of memory of their browsing history, I think many would appreciate it.
Plus, it might also be fun to examine browsing history! Having spent a lot of time working in information search, it is quite surprising how much information one person can cover!
For really cool stuff, having eye tracking to navigate the history would be good. Look left at the older items to move back in time, and right to navigate forwards. Perhaps up to select the document underneath.
The conceptual model is that of a carousel. It sounds extremely corny but could be good.
The idea is that a browser's history is stored in a list of each web page visited. This must include pages that were backtracked upon so that reverses in direction are not excluded. This means that a stack model of recalling visited sites will not work.
When each page loads, a thumbnail of the page is taken and stored in the browser's cache. When the user wants to examine their history, the page they are on zooms back slightly to show a long curving line of web pages (i.e., the history). It zooms back to ensure that the user is given visual cues as to where they are now.
The list of pages is not linear as this would be tricky to work out. My own studies indicate that most history searches are for fairly recent documents so these might be best if they are larger than earlier ones. They are also easier to click because they have a bigger surface area to click on (Fitt's law applies here). Obviously, when clicked on, they zoom up to take the entire page.
This is all well and good for selecting recent pages, but what about pages several hundred or thousand items back? Users can scroll along the list - as they go back in time, the newer pages zoom forward and past the users screen and out of sight while the older ones scroll nearer and become larger and easier to view - users can then make better judgements as to content. Scrolling forward in time does the reverse - users then have older pages receding into the distance while newer ones zoom back in to view.
The pages stand upright on a floor - this floor has indicators of date and possibly time. These help to provide a definite clue as to when pages were accessed which may help search. Pages that are bookmarked have a distinctive border that makes them stand out just in case the user wishes to select a bookmarked page. The user can perform a text query on the collection. All relevant documents then "jump up" a little higher than their sisters to allow the user to see which ones match their query along with another distinctive border (though different to bookmarked ones). They can easily select them, but also see them in relation to nearby history. This seems to tie in well with knowledge about navigation and how other pages may indicate proximity to the required target.
When a document is selected, the history will be searched for other times that the same document was accessed and these will also stand out from the others. This may be useful for documents that change and the user requires information only available from an old page.
How does this differ from other ideas?
My idea uses visual navigation. Web pages are also visual which helps matching. The temporal order in which documents were visited are stored. Because the design is not linear, more pages can be fitted onto the screen. There is also a bias in favour of the most recent documents. The exact date and time in which documents were visited is also visible which works better than "hazing" them - this gives a rough indication as to age, but not an exact idea. This differs from the traditional concept of a zooming interface which from my own work has problems of navigation (i.e., people getting quite lost!), confusion with 3d interfaces etc. This has a 3D effect but is actually a tuned 2D search - maybe more like Marr's 2.5D idea of the human visual system. Finally, I think the concept of moving backwards and forwards in time is appealing and easy to understand for most people. With a few jogs of memory of their browsing history, I think many would appreciate it.
Plus, it might also be fun to examine browsing history! Having spent a lot of time working in information search, it is quite surprising how much information one person can cover!
For really cool stuff, having eye tracking to navigate the history would be good. Look left at the older items to move back in time, and right to navigate forwards. Perhaps up to select the document underneath.
Good time for design
This is a really good time to be into design for lots of exciting things are happening.
Mozilla have introduced a concept series' call for participation. This wants ideas and concepts from anybody. I have a few ideas about browsers that were similar to Aza Raskin's ideas (though his are targetted more at mobile devices whereas mine are closer to the desktop) though I want to handle history more differently. I hope to have a brief demo up soon which I will have on this site.
My major interest is in navigation. It's a personal interest for I often forget where I've been or where exactly is a piece of interesting information that I came across earlier today, yesterday, last week or whatever. The current system of bookmarks and history is workable, but I don't think it's the best solution - it rather stems from being the solution that was easiest to program and is now an established convention. A replacement would have to be very good to succeed, but it is possible. A set of different ideas can also be seen from Wei Zhou.
Watch this space...
Mozilla have introduced a concept series' call for participation. This wants ideas and concepts from anybody. I have a few ideas about browsers that were similar to Aza Raskin's ideas (though his are targetted more at mobile devices whereas mine are closer to the desktop) though I want to handle history more differently. I hope to have a brief demo up soon which I will have on this site.
My major interest is in navigation. It's a personal interest for I often forget where I've been or where exactly is a piece of interesting information that I came across earlier today, yesterday, last week or whatever. The current system of bookmarks and history is workable, but I don't think it's the best solution - it rather stems from being the solution that was easiest to program and is now an established convention. A replacement would have to be very good to succeed, but it is possible. A set of different ideas can also be seen from Wei Zhou.
Watch this space...
03 August 2008
Academics and business - advice for new practitioners
I had an interested electronic conversation with a usability consultant last Friday. His viewpoint was that academic work counted for little when trying to get a job in the field of usability / interaction design. This was not expected because he himself had a PhD though I am not sure if it was particularly aimed at the field.
My point of view is different. I have come across many practitioners both in industry and academia. On the whole, I find that academics are far more knowledgeable than the industrial ones who tend to want to complete projects as soon as possible. I have also found that a minority of industrial practitioners are lacking in skills: for example, one UPA meeting I attended was about card sorting which is a very basic technique in psychology. In my view, every practitioner should know about this. A verifiable minimal level of competence is one thing that this industry desparately needs because it is true that someone can work in the role of interaction design and usability for years while still having fundamental misunderstandings about key topics. Training can help resolve those.
The counter argument is that academics lack knowledge of business practice, but again this misunderstands modern academia. From my own experience, there is no job security (tenure is extremely rare and becoming extinct except for the very top names). Continued service depends upon being successful, mostly in terms of having papers published in peer-reviewed journals (no mean feat), and getting grants (the competition is often far more fierce than for the commercial world here). Collaborations are common (hence team-working) along with the need to be self-motivated and act upon one's own initiative. Managing budgets and staff is universal for most senior academics, as is communicating information to a wide variation of people (from fellow academics through to the general public). The best communicators that I have ever known have all been academics with one exception.
So what is the truth? This is not so clear but the simple answer is that it depends upon the person. Without understanding the person behind the qualifications and experience, no accurate judgements can be made.
My point of view is different. I have come across many practitioners both in industry and academia. On the whole, I find that academics are far more knowledgeable than the industrial ones who tend to want to complete projects as soon as possible. I have also found that a minority of industrial practitioners are lacking in skills: for example, one UPA meeting I attended was about card sorting which is a very basic technique in psychology. In my view, every practitioner should know about this. A verifiable minimal level of competence is one thing that this industry desparately needs because it is true that someone can work in the role of interaction design and usability for years while still having fundamental misunderstandings about key topics. Training can help resolve those.
The counter argument is that academics lack knowledge of business practice, but again this misunderstands modern academia. From my own experience, there is no job security (tenure is extremely rare and becoming extinct except for the very top names). Continued service depends upon being successful, mostly in terms of having papers published in peer-reviewed journals (no mean feat), and getting grants (the competition is often far more fierce than for the commercial world here). Collaborations are common (hence team-working) along with the need to be self-motivated and act upon one's own initiative. Managing budgets and staff is universal for most senior academics, as is communicating information to a wide variation of people (from fellow academics through to the general public). The best communicators that I have ever known have all been academics with one exception.
So what is the truth? This is not so clear but the simple answer is that it depends upon the person. Without understanding the person behind the qualifications and experience, no accurate judgements can be made.
01 August 2008
Not updated
We all do it - those of us with websites of course. Well I imagine that most of us do.
When we have a website and something changes, quite often the website is out of step with the organisation. I guess this is because there are so many levels between the web content and the people making the decisions. I would imagine this to be less of a factor in small companies than large because this gap is likely to be smaller. A one-man operation should be fairly up to date whereas a large corporate website is likely to be lagging somewhat behind the times.
Does this matter? I think it does in terms of the impression a visitor gets from a website. For example, I was looking through the Qinetiq website at careers (I'm not moving there but I was asked to apply there once by the head of human factors after a research project I did). Qinetiq are the largest employers of human factors engineers in the UK and do a large number of projects ranging from small to massive.
One aspect of the website interested me: the deadline page which states, "To make things even easier, there are no deadlines on our graduate scheme. Well, when you're looking for up to 150 of the world's top graduates a year, it pays to keep your eye out all the time. So we have a continuous, year-round recruitment policy." (I think the writing needs to change too). All in all, it sounds like a great policy for a company to have: if talented people come along, grab them or they might work for the opposition and you might have to put up with less talented people.
But on another page (detailing the application process), it says, "Our Graduate recruitment campaign for this year has now closed. We are not employing any more graduates at the present time."
Other pages such as the one detailing salaries and benefits is non-existent.
Does all this really matter? Frankly no it doesn't really matter to Qinetiq's work - they are a large enough organisation to get around this easily enough, but it doesn't create a good impression. It is easy to write tools to spider around a site to find dead links and report them to the web developers. Running these automatically can help a company stay up to date. Using effective meta information can also help the developers keep track of all pages that need to be changed when a company policy is altered.
At user:number 1, we can do these things for you. Although we are primarily an interaction design company, we can also code basic stuff like HTML, CSS and Javascript and other things like PHP and various database accesses. If you want your website redesign, we can also help to make your site one that can be easily maintained by your webmasters and developers. Contact us for a quote today.
When we have a website and something changes, quite often the website is out of step with the organisation. I guess this is because there are so many levels between the web content and the people making the decisions. I would imagine this to be less of a factor in small companies than large because this gap is likely to be smaller. A one-man operation should be fairly up to date whereas a large corporate website is likely to be lagging somewhat behind the times.
Does this matter? I think it does in terms of the impression a visitor gets from a website. For example, I was looking through the Qinetiq website at careers (I'm not moving there but I was asked to apply there once by the head of human factors after a research project I did). Qinetiq are the largest employers of human factors engineers in the UK and do a large number of projects ranging from small to massive.
One aspect of the website interested me: the deadline page which states, "To make things even easier, there are no deadlines on our graduate scheme. Well, when you're looking for up to 150 of the world's top graduates a year, it pays to keep your eye out all the time. So we have a continuous, year-round recruitment policy." (I think the writing needs to change too). All in all, it sounds like a great policy for a company to have: if talented people come along, grab them or they might work for the opposition and you might have to put up with less talented people.
But on another page (detailing the application process), it says, "Our Graduate recruitment campaign for this year has now closed. We are not employing any more graduates at the present time."
Other pages such as the one detailing salaries and benefits is non-existent.
Does all this really matter? Frankly no it doesn't really matter to Qinetiq's work - they are a large enough organisation to get around this easily enough, but it doesn't create a good impression. It is easy to write tools to spider around a site to find dead links and report them to the web developers. Running these automatically can help a company stay up to date. Using effective meta information can also help the developers keep track of all pages that need to be changed when a company policy is altered.
At user:number 1, we can do these things for you. Although we are primarily an interaction design company, we can also code basic stuff like HTML, CSS and Javascript and other things like PHP and various database accesses. If you want your website redesign, we can also help to make your site one that can be easily maintained by your webmasters and developers. Contact us for a quote today.
Subscribe to:
Posts (Atom)