Beginner needing advice on prototyping with balsamic


#1

Hi, I am assuming with the open University, for my final year project I am designing an application to deliver video tutorials to guitarists. The project deliverable will be a design specification and I will be following the interaction design life-cycle model from Beyond human computer interaction design by PREECE et al. I will be gathering requirements I’m producing soft prototypes and high Fidelity prototypes preferably interactive. I have no experience of balsamic, do you think I will be able to produce interactive prototypes using balsamic?

Regards John


#2

Hi John! That sounds like an exciting project. :smile:

I think our tool will be a great fit for your needs. We are focused on low-fidelity wireframes. This tutorial is all about specifying interaction within Balsamiq: http://support.balsamiq.com/customer/portal/articles/107999-specifying-interaction-with-mockups. Good luck with your project!!


#3

Hi
there was a typo in my original message, it should have read student.

is it possible to attach graphics to these posts, so I can show the type of design that I want to replicate?

Regards John


#4

Hi John,

You can just drag an image file onto the text box. It will include the image.

There is also a little black bar with an arrow pointing to the top. When you click it you get a dialog to upload a file or image.


#5

I’m using this for a heuristic evaluation, so my design will look something like this but with extra functionality based on my usability and user experience goals. I was hoping to create a new high fidelity menu option, is this not achievable with balsamic?


#6

Hey @John_Charnock, this is not what Balsamiq is designed for. As I mentioned earlier, our focus is on low fidelity wireframes. If you are wanting to build out the visual design, our tool is not the right one for you. You might check out Sketch, Adobe Illustrator, or even something Axure or Omnigraffle.

We made a little guide you might find useful as you evaluate what your needs are: http://support.balsamiq.com/customer/portal/articles/1339732. Best of luck finding the right tool for you!


#7

Thanks, I have Axure but I am finding it difficult to assess if it has the features I need. I don’t have the luxury of time, I think the learning curve will be too steep.


#8

That is the challenge with most of those tools, and really anything that is meant to solve that complex of a problem. We work really hard on keeping our tool easy to use and to learn, but that requires that we say no to a lot of features. If you don’t need true high-fidelity, you could try just using the Wireframe skin (read more here: http://support.balsamiq.com/customer/portal/articles/98988. It’s still not visual design, or high fidelity, but may be closer to what you need. Cheers!


#9

What is the functionality you would like? I can see if it is possible using Mockups for Desktop 3 along with Flairbuilder or Napkee

UPDATE: Here is a base mockup for you

The only custom icon is the infinity one
I did some cropping after grouping some shapes, so that they can be smaller. @John_Charnock what do you think?


#10

Hi

That looks neat, the objective of the project is to improve the interface, there is a lot of unnecessary clutter and the navigation system isn’t very good. At the moment the student can only see one course, the idea is ti add a library to access multiple courses. Hopefully, the exact use requirements will come out of the requirements elicitation stages which are in progress.


#11

Is a course considered a lesson in this example?


#12

Yes , this is one course with a group of lessons - however students would / can purchase as many courses as they like. At the moment one of the limitations of the design is that it only displays one course.


#13

Okay, got it. Now I understand.


#14

So, going back to my original question do you thunk I will be able to reach a reasonable level of competence? My project is all about the process of interactiveDesign, and there is no scope or points to be scored by learning a new skill however tempting it may seem. Or do I outsource this part of the project ?


#15

I think if you are this passionate about this part of the design, I don’t think you should outsource it. Your original question mentioned a level of interactivity. Napkee is the way to go for interactivity in mockups.


Napkee allows you to use JQuery to produce animations like slide out and fade. Just place the JQuery in the custom properties of your mockup in Balsamiq.


Since your project is about interactive design, one aspect I believe is important is how users can harness the power of multiple programs and achieve something they can’t accomplish with just the one program. Sorry for the wordy answer, but I hope it makes sense.


#16

Why not have a tabbed interface with a course on each tab.


#17

@John_Charnock if your concern is whether you would be able to throw together a mockup with Balsamiq to show what you have in mind, I feel confident that you would be able to. The beauty of our software is that it is extremely simple to use.

That being said, our software is meant for quick and rough wireframes. The idea is that you could quickly throw together a few different options of how it could behave. But our tool is not made for visual design. So if your goal is to create something realistic, and close to the final look and feel, our tool will not be the best for you. But if you are just trying to learn interaction design, and need something to help you illustrate how something could behave, and the features it would have, I think we’re a good fit.

If you decide to try it out, maybe look at our tutorials to get started: http://help.balsamiq.com/tutorials. Whatever you decide, best of luck with your project!


#18

@John_Charnock & @brittneyheggie,

The following is all you need to do:

  • Consider the kind of page-flows (& user journeys), elements & functionality the UI will require
  • Sketch them out on paper and refine them in this manner until you know exactly what needs to happen on which screens
  • Draw a tree-structure showing the hierarchy of the pages & their elements
  • Open Balsamiq & create a wireframe for each of the major use-cases of the UI (the more screens, the more symbols you should probably employ)
  • Use a hot-spot-driven app (like @win7guru suggested, Marvel or proto.io) to create interactive prototypes
  • Test the prototype on actual prospective users
  • Refine the UI based on the feedback you receive (loop these two steps until most interaction bugs have been eradicated)
  • …and when that’s all done, use whatever UI-design software your lecturers have convinced you is the industry ‘standard’ to create the final visual design (preferably only unique screens - minimizing production time…one day in real-world environments anyway)

NOTE: The more comprehensive & inclusive your sketches (& consequently, wireframes) are, the less guess-work the developer will have to do when building commences - or any one looking at them for that matter. With Balsamiq’s symbols, changes across the wireframes will also involve a minimum time/effort.

Hope you feel very…assisted.

:wink:


#19

Hi Ulrich, that is very useful advice.

I have a plan and I am following the four stage iterative Interaction Design LIfe-Cycle model of gathering requirements, produce prototypes, evaluation and design and re-design, my query is about the constraints I have on my time which does not really allow me to learn how to use a new tool. Assessing the difficulty of the learning curve is critical to making my decision of whether to use it for my project


#20

@John_Charnock,

Well, the degree of difficulty would be proportionate to how detailed your wireframes need to be, as well as your grasp of how Balsamiq’s symbols work, which are really easy to use.

So, keep it simple and you should be able to do quite a bit while keeping the learning curvature to as minimum.

Hope it helps!