Harry Brignull, a classmate from my days at the University of Sussex had a fun little blog on eye tracking I thought I’d share with you all. Its about a demo put together by Bunnyfoot at UX Brighton. Bunnyfoot is a great company that does a lot of work with eye tracking technology. I had the pleasure of meeting Jon and Maggie at a UPA conference a few years ago.
Eye Tracking
Protoshare – How to use states sitewide
For those of you thinking about or using Protoshare, I just learned a little more about states. You can implement them across the entire site. How do you do that? Use them in a template that you use throughout the site. Any change in the state will also be remembered.
Why is this useful?
Now, I can quickly mock up what screens look like based on the user’s login status. I can hide/show sections of the screen easily and hide/show login prompts. I’m hoping this will save me a lot of work. Rather than mocking up 2 different screens for each state, I can now mock up just 1: less to create and less to update as changes are made.
A note about defaults….
The first value in the state box is the default. So, if you want to default to show a certain tab open, make sure you set that state accordingly in the state setting. But, if you already have your defaults set up and then you change the order, remember that you will have to change the order for all actions that interact with that state, otherwise, they will be set to the wrong choice. This is a little cumbersome but not awful. Setting the default correctly the first time will make it easier in the future!
Debugging
One way to test your states is via the interactive mode. You can also quickly test using the “States” tab, where you can hide/show states. The “States” tab + the Widgets panel (click the “<<” button the left to open the list) really make debugging easier. Note that you can also hide/show individual Widgets from the list, without using the “States” tab. Both areas are useful both for debugging and to access any Widgets that are not available based on the status a state.
Working with Protoshare
I’ve been evaluating Protoshare to see if it’s a wothwhile addition to my toolset; it turns out some of the features in the tool were perfect for one of my projects. Therefore, I decided to use it for this contract. The tool is really good, for certain situations. It definitely has some issues, but its still a young product and has real promise.
The Good
- The product is pretty fast to learn. It’s an online WYSIWYG web development tool, with a few limitations (mentioned later in this review). Overall, most experienced users should be able to jump right in and get something built quickly.
- The product is still young and it seems to have a lot of potential. The team seems to be open to suggestions. If they continue to listen to customers, the product should evolve in a good way. There is a new release coming out today. And, I am excited to get my hands on the new features. A couple of them will be handy for my current project.
- You do not have to host the project yourself! Because this is an online product, it is already up and ready to share and use for user testing. This is a nice little feature for teams that do not want to deal with hosting. Also, because its already online, any changes are immediately available without needing to update the hosted site.
- Reviewers can post comments/questions directly onto the UI with a “bug tracking” – like tool.
Any comments added will immediately be sent to everyone on the team, for review. When designing a UI remotely, as I am currently doing, this means the team can have one location to design and track issues. Also, if someone posts a question, as the designer, you will receive an email and immediately know that person is looking at the product. You can then call and chat with them about any issues/questions while it is still fresh in their mind. - They have an unusual payment plan for a prototyping tool. You pay monthly, depending on the number of projects and designers you will have. Also, if you are unhappy with the tool, you can cancel your membership without having too much money invested. Additionally, if you find you will not have a need for the tool for a few months, you can “park” your membership for a small fee (currently $5/month, I believe).
- I love how the states work. They are still a bit young in development and have some growth to make them even more useful. However, they are very easy to pick up and use. It took me a lot less time to get comfortable using them, compared to the dynamic panels in Axure. Also, the product has an interactive mode. This mode allows you to click on your prototype as if it is live. While clicking on items, you will see a status of the states turning on/off slide across the bottom of the screen. This makes debugging a breeze.
- Auto generated navigation (including breadcrumbs) really help the designer quickly get working pages together. If you design your site structure well, in a tree that makes sense, you can use their prebuilt navigation widgets. Vertical and horizontal buttons/tabs are quickly generated and customized (Note: Small usability bug: make sure you change the “Hide Starting Pages” field to “no” if you customize the items in your navigation). You can also set some pages to “hide” in the tree to keep them from appearing in the navigation. These items are not 100% customizeable, but you can usually manipulate it to simulate what you want.
- Templates and reusable “clippings” save time recreating the same work on each page. Plus, they’re really easy to set and update.
The Not So Good
- Every now and then I find a little bug. For example, when I paste in text from another source (e.g. a Powerpoint), the Rich Text field will show style code that I didn’t intend to copy. This can easily be fixed by pasting in a generic Notepad file and then copying and pasting the text without any style added. I’m pretty forgiving with these little bugs since the company is new and they have a new release coming out soon!
- You can only have so many active and archived projects at a time for the smaller membership fees. This may be rough over time for smaller groups (e.g. independent contractors). To be able to save more projects, you will need to go up on the membership payscale. This is only an issue for anyone who wants to keep and work on a large number of projects. Then again, if you have a ton of projects, you can probably afford the upgrade in fees!
- You cannot easily host your own projects, or at least it seems as though this is only an option for larger companies. While not having to host is a plus for some teams, it may be a minus for others. Also, if you want to be able to access your prototype offline, on your own computer (e.g. for usability testing in an environment where you may not easily have internet access), there does not appear to be an easy way to export your project. There are discussions of adding the ability to import/export pages in their user forum, but this is not currently availble.
- You do not “own” your projects. If you ever decide to cancel your membership, all of your projects are gone. Therefore, you are relying completely on Protoshare’s ability to keep your work safe. I am sure they have security and back ups in place to protect your content, but you do not have a copy of all your work within your control to protect and version.
- If I want to organize user interviews in an environment without easy access to the internet, how will I access my prototype? Will saving the html be practical? Or will I have to go over mobile broadband?
- If your company has large amounts of existing content in XML format that you want to show in your prototype, you cannot import it or use it in your prototype, yet. However, I was told they are discussing this… no promised deliver date yet.
- If your internet connection is flaky, you may find a few glitches here and there. While your internet connection is not directly related to Protoshare.. it does mean down time from working with their product.
- There are moments the product can be a bit slow. This can be a bit frustrating, but its definitely not a showstopper.
- The main issue is that you cannot always do exactly what you want due to the infancy of the application. This may be an issue if you want a complex site put together. However, I can see where they’re going, and its a good start!
Overall, I’m pretty happy with ProtoShare. In my opinion there are projects and situations where other tools such as Axure (or iRise, if you can afford the license) would be a better choice, and I will continue to choose the tools based on the contract requirements. At least the standard UCD answer won’t change… when someone asks me which tool we should use for a project, I can reply, “It depends.”
One of my favorite usability cartoons
I ran across this while I was searching for an image for another blog. This is definitely an old example, but its still rings true. Enjoy!
EMRs and Healthcare and the 2014 deadline
Electronic Medical Record (EMR) and Healthcare discussions seem to be everywhere you go now, whether its the crazy behaviours at protests or the worry about all this is going to be implemented. For those of you who are interested, here are a couple items that crossed my path in the last 24 hours:
Electronic Records For All Patients Mandated By 2014:
Many who have worked in the medical record industry have been waiting for decades to have an increased governmental push towards adoption of electronic record systems. To date, development and adoption of these systems (of which there are many kinds of electronic medical records) has been an industry led initiative that has proceeded with fits and starts. The Act calls for electronic medical records for all patients by 2014.
Also, tonight there will also be a conference call with David Axelrod. If you are a member of the Organizing for America website, you probably received an invitation. I registered late last night. On the registration form, you are given the ability to enter a question that might get answered during the call. One of my questions:
I know that having Electronic Medical Records is one of the goals of healthcare reform. I agree this is a wonderful goal that will help improve care. Doing this will be very complicated. Applications are regularly tried and have failed (you can see some issues here: https://tegloff.wordpress.com/tag/emr/). Designing a successful system will require a strong usability presence. I have not heard much about user involvement or professional usability designers being involved in this. What is the plan to ensure that whatever is developed will be accepted by the medical community?
I do believe we need to head in the direction of EMRs. I also believe that if we do not do it in the right way, it will not be accepted by the medical community and/or it could actually decrease the care patients get, rather than increase it. So, lets hope we get EMRs… and lets make sure usability practitioners are involved to ensure it is accepted by the end users!
Axure – Dynamic Panels and Cases
Today, I focused on Dynamic Panels and some of the interesting things you can simulate with them. It was really quite intriguing. It seems like the more you learn, the more you’ll be able to do. I’ve spent a lot of my time today debugging, going back and forth between examples/tutorials, and moments of excitement and frustration. I can’t say its gone completely smooth, but I can say I’ve had a lot of fun playing with it!
So far, I’ve decided if you have the patience, there are a lot of really complicated interactions you can create. And, I’ve also learned there are some additional prebuilt widgets that can keep you from having to create too much! Once you’ve spent all your time creating these new items, you can also save them in a library to use as future widgets (so hopefully you won’t have to recreate the items too many times!).
So, here is what I learned today… Note: You do not write code to do these things in Axure. Instead, you set these conditions up via dialogs. However, for explanation sake, I’m using “pseudo-code.”
Cases – You can have cases for a variety of objects in Axure (OnClick, OnMouseIn, OnMouseOut). These cases can have conditions built into them (e.g. If username_textfield = “user1” then ….). You can build in multiple conditions:
If (A and B and C)
but you cannot have complex conditions:
If (A and B) or (C and D)
You can however create multiple cases with the same actions:
- Case 1: If (A and B), Then XYZ
- Case 2: If (C and D), Then XYZ
And, yes, as the previous formula suggests, you can have multple actions for each case (e.g. Open a pop up, hide a menu, and set a dynamic panel state). It’s a little tedious creating duplicate cases for these situations, but its not awful. There are some good things to keep in mind while you’re building your case lists. Just like in programming, the cases seem to be checked in order. Also, if you have no conditions, the last case will run if none of the above cases are true. This will likely come in handy for error messages.
States – You can create different states for your dynamic panels. It was very easy to see how to create and edit these states, but I admit at first I did not see how to do anything with them. My scenario was to have different errors appear in a dynamic area, based on user input. After much searching, I figured out you can set the state within the case statement:
If A, then Set error_dynamicPanel to A_State and Show error_dynamicPanel.
You can also have states for dynamic panels that also contain dynamic panels with more states. I found it was much easier to figure out exactly what I was working on by using a strict naming scheme. Otherwise, you end up with multiple “State1” tabs in your work area.
Prototype Annotations – One last point I wanted to mention is that if you are worried about having little icons on the fields for specifications:
These can be turned on/off when you generate the prototype if you use the “More Generators or Configurations” (F8) menu option. This way, your users will not get confused during interviews!
One of my biggest concerns when selecting a tool for prototyping is that I will have too hard of a time creating the prototype in my head. The goal for me is to explain/test the best design, not the design that I’m able to create. So, if the tool takes too long to learn or the widget I want is too hard to create… I end up spending too much time trying to create it and not enough time on the design. (On a side note, this is one reason I am not enthusiastic about full HTML prototypes. If the UX person is not strong in HTML, their design will be handicapped based on their abilities. However, if the person is a strong coder or has a strong coder to work with, this is not an issue. It’s just something to keep in mind when you have a team that makes this request.)
I believe Axure will become easier to use as you use it. I also think there will always be new things you have to figure out how to simulate. Figuring out how to solve the problems will be fun at times. However, my biggest concern would be that I would not have time to figure it out to meet my deadlines with the best design (not just the best design I can create with the tool in the time alloted). On a high point, it looks like they have really good customer support to help you out if you get stuck!
Prioritizing Features
Last Friday I blogged about user features and how we should not give in to every request… Over the weekend, I realized I didn’t give any advice about how to prioritize these features. So, here I am to rectify that! A colleague of mine, Matt Gregg , shared a technique with my old UX team. It’s called the Kano Method.
The Kano Method allows you to figure out which features really need to be included into your product. According to the method, each feature falls into 1 of 6 categories:
- Must have features. Users MUST have these features to purchase/use your product.
- Desireable features. These are really useful features that can add value to your product.
- Exciting features. Great bonus features that will excite and entice your user population.
- Indifferent features. These features are condered ok, but not really worth much notice from the user.
- Questionable features. Results for these featuers were not clear. There was conflicting data gathered. Quite likely, your questions were too confusing and should be rewritten, or the user truly does not care one way or another about the feature.
- Reversal features. These features may actual cause your users to stop buying/using your product.
To categorize the features, you use a specific survey style. Users rate each feature in a “functional” way and a “dysfunctional” way. So, for example, if you want to rate a password reminder feature. You would have 2 questions (functional and dysfunctional, respectively):
- How would you feel if you had the ability to request a password reminder on the website?
- How would you feel if the ability to request your password were not available on the website?
Another example (functional and dysfunctional, respectively):
- How would you feel if a cooking website contained more recipes than most websites online?
- How would you feel if a cooking website contained less than the average number of recipes?
Your users would then categorize each question using a set scale. Note: It is not a good idea to list these features and rate them using a Likert-style scale. The user needs to understand that this is NOT a rating scale, instead they are categorizing each feature.
- I like it that way
- I expect this feature to be in the product
- I am neutral
- I can live with it that way
- I dislike it that way
To analyze your results, you simply calculate how each feature was categorized functionally and dysfuctionally and use the following matrix to analyze the results:
Think through an individual feature, e.g. being able to request your login password. Let’s assume this is a mandatory, must have feature that the user expects. For the first question listed above (How would you feel if you had the ability to request a password reminder on the website?), most users would select category 2 – I expect this feature to be in the product. For the dysfunctional version of the question (How would you feel if the ability to request your password were not available on the website?) most users would select 5 – I dislike it that way. Therefore, an “M” square would be selected in the matrix and the feature would becategorized as a must have.
Now, lets look at a more confusing item on the matrix. Let’s say our feature is addition of a jacuzzi to a hotel room. The functional question could be: “How would you feel about having a jacuzzi in your room?” Let’s assume most users categorize this as a 1 – I like it that way. Next, they read the dysfunctional question: “How would you feed about having a standard tub in your room?” We’ll assume users will select a 2 – I expect this feature to be in the product. So, we have a feature that users like, but it appears like they do not expect it, since they do expect the dysfunctional feature. On our matrix, this feature would be categorized as an “E” – an Exciting feature.
Features can then be ordered based on the priorities of your team and the users. One of the wonderful benefits with using this method is that you can prioritize user interview findings with a large audience very easily via a web survey. Additionally, it can be useful tool when bartering with your team!
Giving users what they want… or what they need
My preschool son loves all the Herbie movies. He gets excited anytime he sees a VW Beetle and yells “Herbie!” and then proceeds to tell us all about him: “Herbie is a racecar.” “Herbie’s wheels and lights.” You get the idea. We’ve been toying with the idea of getting him a Herbie of his own and finally decided to do it after a string of really good accomplishments (sleeping better, being good in preschool, potty training, etc.).
Two nights ago, we were walking downtown and saw a red, vintage Beetle. My son gets so excited that we run across the street to say “hello.” He proceeds to tell us to get the keys and get in the car. He wanted to drive. He wanted this Herbie. Little did he know his own version of Herbie was coming in the mail the next day.
However, his version of Herbie is not a full size car. It’s a small ride on. It’s not exactly the right style (more like a modern VW). It’s not even the right color. Also, it has a parental override…. a remote control so we can make sure he’s safe. This is not what he asked for…. but its what he needed.
He still loves it. It’s the right size for him. He can reach the pedals. He can steer. It has a funny horn sound and blinking lights. He is disappointed in the color. So, for the “next release” we will update his new toy with a white paint job and Herbie decals – already arrived from Ebay. However, overall, he is thrilled with it.
Now, I’m not saying that all users are like preschoolers. However, as usability professionals, we know our users will sometimes ask for more than they could want or need. Some features, no matter how cool they sound, are just not the right thing to include. Some features would actually hinder the user’s interaction with the software. For example, would it make sense to give my little boy a full sized VW? No way! Its much too powerful and big for him. His new little bug is just right!
My 2nd Axure Experience
After my first experience with Axure, I was very excited to try a real world scenario…. something other than the set demo that worked so well. So, I pulled out a wire frame I put together as a quick mock up (PowerPoint, my favorite mock up tool) and started recreating it.
At first impression, I thought it was pretty quick. Putting the page together was easy. Most things work as expected. After the demo walkthrough, I felt like I had a pretty good handle on some basic actions. I immediately jumped into making my master items. I have always loved using masters, which is one reason why PowerPoint has worked so well for me in the past. It was a bit odd that the sitemap node on the page tree was called “Home” rather than “Sitemap.” However, it is the “Home” of the prototype, so I let that slide. Besides, once you figure out that it doesn’t behave like a normal page, its easy to see its true functionality.
Then, I ran into a few annoying features…
Choosing colors: The color picker is a little clunky. I wanted to use a custom color from a websafe chart, but when I toggled between my chart and Axure, the color picker is lost. Ok, so you can find it again via Alt-Tab, but why isn’t it forced to stay up. I wouldn’t be quite so picky if this were an open source project, but I expect a $600 application to be a little more polished. This isn’t a HUGE issue, but it does get frustrating when you’re going back and forth between windows.
Second level bullets: It’s very easy to drag and drop widgets onto the page and configure them. Most formatting tools work as expected. However, I tried for about 10 minutes to create a second level of tabs within my text widget. Yes, I could’ve created a second text field and just moved it over, but I preferred to keep it as one big text field. I even went into the help system for the first time. When I clicked on the “Bullets -> Add” topic, I was told how to add a widget to the page, nothing to do with bullets. So, I gave up and just used dashes and spaces. Not an awful work around, but still frustrating.
Embedded links: So, how often do we as designers have a link in the middle of a sentence? All the time! This is my largest issue with the application so far. It is the type of thing that will make me groan every time I need to do it, until I figure out a better work-around. You cannot select text from a text widget and make it a link. You can make the entire text widget a link, but this is not useful for usability testing or for explaining the design to your team. Plus, if you have more than one link you are stuck. You can break the text into little bits, but then you have to constantly align things and deal with all the little widgets. I opted for creating links with the exact text and size of my links and overlaying them. I wasn’t completely happy with my workaround, but it wasn’t too bad. And, once you line it up and group it, everything stays in place unless you resize anything or change the text… Then its a matter of ungrouping, realigning and grouping again. As a workaround, its not awful. And, given the potential of the application, I was happy to let it slide… until I generated the prototype.
| Within Axure: |
 |
| Prototype: |
 |
This does not mean I’ve given up on the product. All products have their flaws. I’m going to keep going and see what happens.
Persuasive Personal Informatics
Today, I saw an interesting Tweet by IATV. He seems to post some really good links, and I think he may become one of my favorites to follow.
This afternoon, he posted a link to a presentation on Persuasive Personal Informatics. The presenter, Matt Jones, is one of the designers at Dopplr. I wish I had the pleasure to see his presentation in person and chat with him about it. The presenter had a great sense of humor and shared a lot of interesting stories and designs. Its only 35 minutes long, so its definitely worth a watch:
Persuasive Personal Informatics
Enjoy! 
Tammie Egloff's Usability Blog 