Archive for Prototype

Issues with Skype’s Firefox add-on, slows down Firefox (and, thus, Protoshare)

Just as a quick heads up to all of you out there, I was working in Protoshare and it was running painfully slow. It turns out that Skype’s Firefox add-on can slow down Firefox tremendously. By uninstalling the add-on, everything came back up to regular speed and Protoshare was working beautifully again!

So, if any of you are having Protoshare speed issues ( or Firefox browser issues) and also have Skype installed, check out your versions and try uninstalling (or, at least, disabling) the add-on.

Some other people were having the same issue:

http://forum.skype.com/index.php?showtopic=390751

The versions I’m using…

Firefox: 3.5.3

Skype: 4.1.0.141

Good luck and happy prototyping!

Comments (1)

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.

Comments (2)

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.”

Comments (4)

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:

  1. Case 1: If (A and B), Then XYZ
  2. 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: 

 Annotations

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!

Leave a Comment

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:
linklabels_inapp
Prototype:
linklabels

Energizer bunnyThis 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.

Comments (5)

The Axure adventure begins….

I’ve decided it is time for me to learn Axure. Since it’s a product that I’m sure others are curious about, I thought I’d chronicle my adventures….

Currently, my Axure adventures include installing the free trial and going through its 30 minute tutorial. I love exploring new software, so this is a lot like playtime for me. Axure made it even easier. When you go to install its free trial, it provides links with a quick 30 min .pdf file and starter .rp file to help you with the tutorial.

My current favorite prototyping tool is PowerPoint. I have it down to a science and have been asked for my HTML code because the image look so real. Additionally, I am able to make quick walkthroughs, so the user can pretend to use the site. There are a couple bugs in PowerPoint when you attempt this, but overall it works. Axure reminds me of my favorite tool and adds on even more, great functionality. The masters are powerful and quick to use. Interactions seem to be pretty intuitive so far. And, it’ll even generate my specifications for me!

I’m not 100% sold until I try to build some real world scenarios, but I have to say… so far I’m intrigued! Plus, I’ve still got Protoshare to check out.

Leave a Comment