Quick animation or the like upon launching a canvas app

[knowledgenotebook]

Hi,

I have a HTML canvas-based app, which needs only three icons to get
basic function done and tho it's not clustered...for the very first
time user, it's still unclear as to which icon to click. So, to
increase a level of usability, I could possibly try some of the
following options.

a) use some sort of advanced java-scripting to trigger and time these
icon clicks to simulate a human action...
For instance,

[icon S] (for Saving the work) -- Sequence 3

[icon A] (for text input) -- Sequence 1
[icon L] (for drawing a line) -- Sequence 2

Doable? How difficult would it be?

b) create a separate animation file and use java-script to trigger it
upon launching this canvas app?

In both of the above scenario, I'd like to have an ability to run it
as well for after once or twice a user wouldn't need it...

c) .... ?

Thanks.

 

[Erwin Moller]

Hi,

I have a HTML canvas-based app, which needs only three icons to get
basic function done and tho it's not clustered...for the very first
time user, it's still unclear as to which icon to click.

Maybe some text explaining how to use the app is in place then?
Maybe let the app start with a picture where you show the 3 buttons, and
add big pointers to the buttons that say: "Save", "draw a line" and
"text input".

So, to
increase a level of usability, I could possibly try some of the
following options.

a) use some sort of advanced java-scripting to trigger and time these
icon clicks to simulate a human action...
For instance,

[icon S] (for Saving the work) -- Sequence 3

[icon A] (for text input) -- Sequence 1
[icon L] (for drawing a line) -- Sequence 2

Doable? How difficult would it be?

That depends completely on the underlying app.
It can range from very easy to extremely frustrating.

I expect it is easier to create a movie of you doing it one time and
place a link to that movie next to the app.

b) create a separate animation file and use java-script to trigger it
upon launching this canvas app?

I personally dislike animations that start without me asking to do so first.
I advice you to offer an explanation (in video, or own animation) and
make it clear to the visitor they can click on it to get more information.

Add some text like: Using this application is very easy: click here for
an example.

In both of the above scenario, I'd like to have an ability to run it
as well for after once or twice a user wouldn't need it...

I do not understand what you mean here.

c) .... ?

Thanks.

Good luck,
Erwin Moller

 

[Jeff North]

On Sun, 10 Apr 2011 12:59:53 -0700 (PDT), in comp.lang.javascript
knowledgenotebook <[email protected]>

| Hi,
|
| I have a HTML canvas-based app, which needs only three icons to get
| basic function done and tho it's not clustered...for the very first
| time user, it's still unclear as to which icon to click. So, to
| increase a level of usability, I could possibly try some of the
| following options.

Icons should be self explanatory
If these are not part of the canvas then you can use the alt and title
attributes of the image i.e.
<img src="btnSave.gif" alt="Save" title="Save drawing">

[snip 2 end]

 

[Jukka K. Korpela]

Maybe some text explaining how to use the app is in place then?

As usual, if we actually saw the application (the OP wrote "I have - -", so
it apparently is something that exists, in some sense), we would know much
better and would be able to help more.

Maybe let the app start with a picture where you show the 3 buttons,
and add big pointers to the buttons that say: "Save", "draw a line"
and "text input".

You could use <button> elements that contain some iconic image _and_ some
short text.

But maybe it's the overall idea of how the application works that is needed.
If it only has tools for drawing a line, entering text, and saving
(something somewhere), it's difficult to imagine how it could be improved by
proving some explanation or example.

Add some text like: Using this application is very easy:

The natural reaction is: if it really were easy, you wouldn't feel any need
to tell me that.

 

[knowledgenotebook]

As usual, if we actually saw the application (the OP wrote "I have - -", so
it apparently is something that exists, in some sense), we would know much
better and would be able to help more.

Ok, please take a look at the following screen shot except the [Save]
button at the top,
http://www.knowledgenotebook.com/tutorials/KN-visualization.html

Btw, I have a [Help] button for the entire app, which has entry for
how to use it.

@Erwin

In both of the above scenario, I'd like to have an ability to run it
as well for after once or twice a user wouldn't need it...

Sorry, typo, "I'd like to have an ability to run it" should have been
"I'd like to have an ability not to run it"

@Jeff,
"Icons should be self explanatory "
Sure, you're a programmer but an average user isn't, Jeff.

Ahe, I have an idea, I could default to have a [Help] button, which
would bring up a help entry (graphical) and fade away after 3 clicks
of launching this app component...
assuming after 3 times a user would be able to use it by now...

Thanks.

 

[knowledgenotebook]

As usual, if we actually saw the application (the OP wrote "I have - -", so
it apparently is something that exists, in some sense), we would know much
better and would be able to help more.

Ok, please take a look at the following screen shot except the [Save]
button at the top,http://www.knowledgenotebook.com/tutorials/KN-visualization.html

Btw, I have a [Help] button for the entire app, which has entry for
how to use it.

@Erwin> In both of the above scenario, I'd like to have an ability to runit

as well for after once or twice a user wouldn't need it...

Sorry, typo, "I'd like to have an ability to run it" should have been
"I'd like to have an ability not to run it"

@Jeff,
"Icons should be self explanatory "
Sure, you're a programmer but an average user isn't, Jeff.

Ahe, I have an idea, I could default to have a [Help] button, which
would bring up a help entry (graphical) and fade away after 3 clicks
of launching this app component...
assuming after 3 times a user would be able to use it by now...

Thanks.

On a second thought, I have an even better idea than the following,
"Ahe, I have an idea, I could default to have a [Help] button, which
would bring up a help entry (graphical) and fade away after 3 clicks
of launching this app component...
assuming after 3 times a user would be able to use it by now...
"

 

[SAM]

Le 11/04/11 22:57, knowledgenotebook a écrit :

@Jeff,
"Icons should be self explanatory "
Sure, you're a programmer but an average user isn't, Jeff.

.... ??? ...
personally I think that
those four icons are really well self explanatory !

(didn't see that made to "save)


The screen capture doesn't tell us if those icons are separate img
or part of the "canvas"







<ul id="myIcons" title="help = double-click"
onclick="this.className='';dothat();"
ondblclick="this.className='help'" >
<li><img src="pointer.jpg" alt="">
<span>to select an element</span></li>
<li><img src="caracter.jpg" alt="">
<span>heiht of texts</span></li>
<li> ...


#myIcons li { position: relative; }
#myIcons span { position: absolute; top:5px;left:20px; }
#myIcons.help span { display:block }