tag:blogger.com,1999:blog-91471387574395999642024-03-13T07:40:16.626-07:00Andrea Kendall's Usability BlogAndrea Kendallhttp://www.blogger.com/profile/14304385264774574102noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-9147138757439599964.post-85661695863247449072009-03-11T12:42:00.001-07:002009-03-11T22:17:25.070-07:00Find the login - quick!<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.andreajkendall.com/images/blog/Dice.png"><img style="cursor:pointer; cursor:hand;width: 800px; height: 192px;" src="http://www.andreajkendall.com/images/blog/Dice.png" border="0" alt="" /></a><br /><br /><p class="MsoNormal">Your task, should you decide to take it, check on the jobs you have saved and quickly send out the appropriate resumes.<br /><br />Your situation, you have looked at a variety of your favorite job search sites until your eyes hurt, each that of course has its own look and feel. You quickly look at this screen and it takes you a while to realize that one of the options is for you to login.</p> <p class="MsoNormal"><o:p> </o:p></p> <p class="MsoNormal">So how could this site be made better?<span style=""> </span>One thought would be to use all that blank space in the upper right hand corner and have a nice big login button or a login screen right there. </p> <p class="MsoNormal"><o:p> </o:p></p> <p class="MsoNormal">So what do you think? </p>Andrea Kendallhttp://www.blogger.com/profile/14304385264774574102noreply@blogger.com1tag:blogger.com,1999:blog-9147138757439599964.post-89434089395774193962009-03-03T15:16:00.000-08:002009-03-05T21:09:44.563-08:00An untested idea for a paganated tree<h2>The Paginated Tree (© 2009 All rights reserved) for complex messages </h2> I was working on Sun Microsoft's Business to Business application a year ago. One of the most interesting problems that I had to be solved was to design a way to show a complex message where each section of the message could have thousands of children.<br /><br />The system had to stay responsive to the user so showing all the nodes at once would not be practical.<br /><br />After doing research and not finding a paginated tree I came up with the following design.<br /><ul><li>Nodes show which repetition of the node is being shown.</li><li>Users can expand / collapse a node and use a paginated control to see children.</li><li>User can switch to a view where each of the repetitions are also shown.</li></ul><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_NpGmNq26oiU/Sa3IxPGlkRI/AAAAAAAAArQ/rTpmiGneEGE/s1600-h/MsgView1.png"><img style="cursor: pointer; width: 400px; height: 328px;" src="http://1.bp.blogspot.com/_NpGmNq26oiU/Sa3IxPGlkRI/AAAAAAAAArQ/rTpmiGneEGE/s400/MsgView1.png" alt="" id="BLOGGER_PHOTO_ID_5309120283932987666" border="0" /></a><br /><br />While the <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_NpGmNq26oiU/Sa3KWrdYzNI/AAAAAAAAArY/EjxSst8svbk/s1600-h/ShowAll.png"><img style="cursor: pointer; width: 16px; height: 12px;" src="http://2.bp.blogspot.com/_NpGmNq26oiU/Sa3KWrdYzNI/AAAAAAAAArY/EjxSst8svbk/s400/ShowAll.png" alt="" id="BLOGGER_PHOTO_ID_5309122026711600338" border="0" /></a> icon was mostly a place holder the idea was that a user could select this icon and change to a view where the folders themselves where paginated.<br /><br />Here is an example showing all repetitions of the GS segment:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_NpGmNq26oiU/Sa3K640GzWI/AAAAAAAAArg/ChHwisPA8Nc/s1600-h/MsgView2.png"><img style="cursor: pointer; width: 400px; height: 328px;" src="http://1.bp.blogspot.com/_NpGmNq26oiU/Sa3K640GzWI/AAAAAAAAArg/ChHwisPA8Nc/s400/MsgView2.png" alt="" id="BLOGGER_PHOTO_ID_5309122648771841378" border="0" /></a><br /><br />Due to business needs our team never got to formally test this. So I was hoping to see what other people think of this solution.<br /><br />Any comments? Problems? Ideas for a better icon?<br /><br />Better yet if you have a need for a widget like this and would like to implement this idea contact me at <a href="mailto:Andrea.Kendall.job@gmail.com">Andrea.Kendall.job@gmail.com</a>.Andrea Kendallhttp://www.blogger.com/profile/14304385264774574102noreply@blogger.com0tag:blogger.com,1999:blog-9147138757439599964.post-80599047626556321242009-02-24T22:17:00.000-08:002009-03-05T21:10:21.131-08:00Is it a Tab or a Button?<span style="font-family:lucida grande;">A pet peeve of mine is when a web site uses both tabs and buttons that look the same. This is especially bad when the buttons appear right below the tabs.</span> <div><br /></div><div><span style="font-family:lucida grande;">When you are quickly looking at this GUI it is easy to think the buttons are tabs and you have to take a few moments to find standard functions, like Delete.</span></div><div><span style="font-family:lucida grande;"><br /></span></div><div><span style="font-family:lucida grande;"></span></div><div><span style="font-family:lucida grande;"><br /></span></div><div><span style="font-family:lucida grande;">Here is an example I recently saw on an otherwise OK Web Mail GUI. I have marked it up so yoy can tell the difference, but imagine you where looking at this quickly without the mark up.</span></div><div> </div><div><span style="font-family:lucida grande;"></span></div><div><a href="http://2.bp.blogspot.com/_NpGmNq26oiU/SaTjp9YQfDI/AAAAAAAAAqQ/zQdzpHUXu1w/s1600-h/TabOrButton.png"><span style="font-family:lucida grande;"><img id="BLOGGER_PHOTO_ID_5306616570939735090" style="width: 400px; height: 71px;" alt="" src="http://2.bp.blogspot.com/_NpGmNq26oiU/SaTjp9YQfDI/AAAAAAAAAqQ/zQdzpHUXu1w/s400/TabOrButton.png" border="0" /></span></a><br /><br /></div><div><span style="font-family:lucida grande;"></span></div><div><span style="font-family:lucida grande;">So what would help?<br /><br /></span></div><div> </div><div><span style="font-family:lucida grande;"></span></div><div><span style="font-family:lucida grande;"></span></div><div><span style="font-family:lucida grande;">Make the buttons look more like a real physical button with a different style.</span></div><div><span style="font-family:lucida grande;"></span></div>Andrea Kendallhttp://www.blogger.com/profile/14304385264774574102noreply@blogger.com0tag:blogger.com,1999:blog-9147138757439599964.post-77351683100518287922009-02-21T15:59:00.000-08:002009-02-27T16:31:34.237-08:00Text size increases - you know you have it right when...<span style="font-weight: bold;">You know you have it right when....</span><br /><br />You may have seen sites with text that increases in size to show what keywords search is most popular.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_NpGmNq26oiU/SaCWb6d4e-I/AAAAAAAAApc/93p4j5meMUw/s1600-h/whatispopular.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 66px;" src="http://2.bp.blogspot.com/_NpGmNq26oiU/SaCWb6d4e-I/AAAAAAAAApc/93p4j5meMUw/s320/whatispopular.jpg" alt="" id="BLOGGER_PHOTO_ID_5305405767337671650" border="0" /></a><br /><br /><br /><br /><br /><br />This works so well that you just need to glance at it and you get it.<br /><br />This example of usability at its best is so powerful that I have noticed something interesting. People have started to use weighted text in emails and forums to attract attention to important points they want to make.<br /><br />I myself have taken the idea, which clearly shows the most popular hits and adapted it to use in email where I am addressing a group and need specific people to pay attention to certain parts of the email.<br /><br />In this case I use the 'bigger is more important principle'. In a simple case I might just bold and make larger names of people that are being addressed.<br /><br />For fun here is a made up, simple example:<br />------------------------------------------------------------------------------------------<br /><br /><span style="font-weight: bold;font-size:130%;" >Everyone</span> <span style="font-size:100%;"><span style="font-weight: bold;"></span></span>lets meet for pizza at 9:00pm at our favorite place 'real good real cheap Pizza'.<br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">Sue</span></span> make sure to bring the cards so we can play a' quick really fun game'.<br /><br /><span style="font-weight: bold;font-size:130%;" >Wee/Anil</span> <span style="font-size:100%;">make </span>sure to bring the pencils and score pads.<br /><br />----------------------------------------------------------------------------------------<br /><br />Anyway you get the idea the larger font makes it easy to spot different people. In a large complex email with lots of text everyone can read everything or just the parts that affect them.<br /><br />Additionally, this style lets everyone know who is being addressed using only text.<br /><br />So has anyone else started using a style similar to this?<br /><br /><span style="text-decoration: underline;"><br /><br /></span>Andrea Kendallhttp://www.blogger.com/profile/14304385264774574102noreply@blogger.com0