UI walkthrough generator

31 Jan 2006 - 6:12pm
8 years ago
8 replies
783 reads
Taneem Talukdar
2005

Hello,

I am working on a document presenting the UI of a software application.

Basically, I'm compiling screenshots of every state the application has. The
way I'm compiling and presenting the information is not the most elegant.
I'm tempted to hack together a web script that generates a mini-website
template allowing users to click through and navigate the UI screens.

My questions: does something like this already exist? How do I properly
document and present the UI of a software application?

Many thanks for any advice,

Taneem Talukdar

Comments

31 Jan 2006 - 6:59pm
Robert Hoekman, Jr.
2005

Try RoboHelp:

http://www.macromedia.com/software/robohelp/?promoid=BINZ

-r-

On 1/31/06, Taneem Talukdar <taneem.t at gmail.com> wrote:
>
> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> Hello,
>
> I am working on a document presenting the UI of a software application.
>
> Basically, I'm compiling screenshots of every state the application has.
> The
> way I'm compiling and presenting the information is not the most elegant.
> I'm tempted to hack together a web script that generates a mini-website
> template allowing users to click through and navigate the UI screens.
>
> My questions: does something like this already exist? How do I properly
> document and present the UI of a software application?
>
> Many thanks for any advice,
>
> Taneem Talukdar
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

1 Feb 2006 - 4:56am
Peter Boersma
2003

Taneem Talukdar said:
> I am working on a document presenting the UI of a software application.
>
> Basically, I'm compiling screenshots of every state the application
> has. The way I'm compiling and presenting the information is not the
> most elegant.

Sounds like you could use something like the J-Flow, as presented at the
2004 IA Summit: http://www.iasummit.org/2004/confdescrip.htm#go35 The
presentation and a sample J-Flow can be found here:
http://www.xs4all.nl/~nieuwnet/iasummit/

The tool is not commercial, but I can get you in touch with the maker (with
whom I co-presented).

Peter
--
Peter Boersma | Consultant User Experience | User Intelligence
Vlaardingenlaan 9d | 1059 GL | Amsterdam, The Netherlands
p: +31-20-4084296 | m: +31-6-15072747 | f: +31-20-4084298
mailto:boersma at userintelligence.com | http://www.peterboersma.com/blog

2 Feb 2006 - 12:11pm
Andrew Otwell
2004

> I am working on a document presenting the UI of a software
> application.
>
> Basically, I'm compiling screenshots of every state the application
> has. The way I'm compiling and presenting the information is not the
> most elegant. I'm tempted to hack together a web script that
> generates a mini-website template allowing users to click through and
> navigate the UI screens.

If you're rebuilding a navigable version of every state of every screen
of the app, just for a walkthrough, why not let users use the actual
application? If this is a true walkthrough, like a narrated tour of the
app, you shouldn't need any actual navigation--just make a series of
slides.

It sounds like you are building something more interactive. I'd just
throw all the screenshots into Powerpoint and create some hotspot
navigation boxes.

> My questions: does something like this already exist? How do I
> properly document and present the UI of a software application?

That is the big question, isn't it?

3 Feb 2006 - 2:29am
Peter Boersma
2003

Andrew Otwell said:
>> My questions: does something like this already exist? How do I
>> properly document and present the UI of a software application?
>
> That is the big question, isn't it?

Not as big as you'd think. Or, alternatively, it's two big questions ;-)

The way an internal/external design team uses design documentation may very
well be different from the way it is presented to the business owner/client.

Team members will likely have access to interal tools (requirements
repositories, version control systems, specialist design software) that
allows them to get a full picture of what is being designed.

Clients may need to be shown these artifacts with improvements over the
previous version highlighted, in Word, Powerpoint or PDF format, robbing
them of their interactivity, internal links, connections, history, etc.

Oh, and there's a third target group: participants of early usability
evaluations. They don't care about the difference between the version they
see and that of a previous iteration and they won't have the design tools,
but do require as realistic a look at the behaviour of the system.

Each group needs a different set of deliverables, unless we can think of a
way to present the same set in different ways, hiding technical details,
real-time behaviour, or design history depending on the expected use.

Peter
P.S.: I am currently involved in defining a set of deliverables that does
try to integrate all uses, from design specification, via client
presentation to use as prototype. My colleague will present the intermediate
results as a poster at the next IA Summit.
--
Peter Boersma | Consultant User Experience | User Intelligence
Vlaardingenlaan 9d | 1059 GL | Amsterdam, The Netherlands
p: +31-20-4084296 | m: +31-6-15072747 | f: +31-20-4084298
mailto:boersma at userintelligence.com | http://www.peterboersma.com/blog

3 Feb 2006 - 5:32am
bhakti भक्ति
2006

Requirement of Interactive Guide for UI :
Every workflow that has to explicitly explained with help of simulations or
series of screeshots. You may try Macromedia Flash for simulations.

I would suggest if the material can be simplified in smaller parts of
information, you can have a combination of *screenshots + content*for
effective communication. To better explain the workflow.
Interactive simulations can form the concluding part to emphasize the
usage/functionality.

Bhakti

3 Feb 2006 - 6:27am
Dave Malouf
2005

Recently I went to the Pixar exhibit at the Moma: (moma.org).
Besides really the sheer beauty of the exhibit, I was so inspired to see
over and over and over again how important "process" is to their creativity.
They lay it out for you so well.

I wrote up a little piece about it:
http://synapticburn.com/comments.php?id=128_0_1_0_C

1 piece that is relevant here is that they do storyboards, and then splice
them together into a reel, sorta like the original poster is describing.

Seeing this and other similar techniques for adding motion over time into
their prototyping and the effective level of change by doing so convinced me
how important it is for us to add motion and interactivity into our tests
and protottype. While Flash is one way to do this, so is just using xHTML.

My team and I were having a discussion about this yesterday, and the
conclusion that we came up with is that you have to go with the skills of
the team.

You talk about "generating" the walkthrough. That to me suggests that the
application already exists. So for testing purposes, well, as someone
suggested, just use the application. If it is for documentation purposes,
then, I would suggest that you just take a camtesia of the application and
then split the video into frames. You'll end up with more than what you
need, but I bet it would be quicker than taking a screen shot of every
state.

-- dave

6 Feb 2006 - 12:03pm
Taneem Talukdar
2005

>
> You talk about "generating" the walkthrough. That to me suggests that the
> application already exists. So for testing purposes, well, as someone
> suggested, just use the application. If it is for documentation purposes,
> then, I would suggest that you just take a camtesia of the application and
> then split the video into frames. You'll end up with more than what you
> need, but I bet it would be quicker than taking a screen shot of every
> state.

I think I used the word "generating" wishfully ;)
Creating a flash/video essay is tempting, however it does not easily convert
into a print friendly format (clients of these documents are the type to
print and look over the screens). It would be great to have something that
can create, via flash or even a simple minisite structure, an intuitive
application walkthrough that can also convert the content to something that
is printer friendly and that can also be easily updated (another issue with
video essays, unless you break things into "chapter episodes" or
something...).

Thanks everyone for the feedback :)

Cheers
Taneem

9 Feb 2006 - 8:57am
Chris Jackson
2006

Taneem Talukdar wrote:
>
> It would be great to have something that
> can create, via flash or even a simple minisite structure, an intuitive
> application walkthrough that can also convert the content to something that
> is printer friendly and that can also be easily updated (another issue with
> video essays, unless you break things into "chapter episodes" or
> something...).

Hello Taneem,

Microsoft does offer a free (Windows XP-only) Power Toy called HTML Slide Show Generator that "helps you create an HTML slide show of your digital pictures, ready to place on your Web site." I just tried it out and it did a decent job for something quick. If you wanted to add annotations, you could just edit the HTML it outputs.

http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx

Chris

--

Chris Jackson
Information Architect
Networked Information Services
Boston University
617-358-0547
http://www.bu.edu/webcentral/

Syndicate content Get the feed