Web Application Functionality: User Annotations

5 Feb 2006 - 11:53am
8 years ago
7 replies
2185 reads
gleija at comca...
2003

I am the information architect and interaction designer at a non-profit foundation. I have designed a web application that my organization uses to intake, review and award applications for research grants. This year over 1000 applications were submitted online and we are awarding about $50 million dollars to scientific researchers at institutions across the US and abroad.

There is an administrative piece which enables our internal grants administrators to approve applications that meet our compliance standards, determine eligibility and qualifications for external reviewers (scientists and doctors), assign appropriate applications to these reviewers (filtering conflicts of interest between applicant and reviewer institutions, among other criteria), monitor the reviewing process (reviewers submit scores and comments online), set and adjust funding amounts and balances, and monitor post award progress reporting (also done online by grantees) through the term of the awarded grant.

There's a lot more, but here's one of my issues. The administrators enter their own comments for various elements on the screens. I have a comment text field on almost every screen and I also display a comments log, which is stamped with author, date and time, so one administrator can read another's comments and respond (but not overwrite). There are multiple line items on every screen (think IRS form, insurance claim, etc.) and, as an enhancement for next year, the administrators want a separate comment box for each item. (Don't ask me to explain the culture here - it is what it is.)

This will lead to extremely busy screens filled with comment boxes. I am thinking about taking all the comment boxes off and putting a comments icon next to each item instead - maybe a speech bubble - that the admins can click to open a separate window where he or she can enter the comment specifically associated with that item. I can put something in the speech bubble (an exclamation mark maybe) so that at a glance you can see that some items already have comments. The admins would always go to a separate screen to see all comments, organized by line item, and read or respond to them there, instead of on the admin screen where they are performing their other tasks.

I'd love to know if anyone has resolved a similar interaction design issue. All of our development is in asp.net. Our developers are very good at adapting .net controls to create rich interactions, but they look to me for UI direction, CSS enhancements, workflow design and interpretation of complex business rules.

Thanks in advance.
(Apologies for cross-posting.)
/Gail

Comments

5 Feb 2006 - 6:41pm
Andrew Otwell
2004

> This will lead to extremely busy screens filled with comment
> boxes. I am thinking about taking all the comment boxes off and
> putting a comments icon next to each item instead - maybe a speech
> bubble - that the admins can click to open a separate window where
> he or she can enter the comment specifically associated with that
> item. I can put something in the speech bubble (an exclamation
> mark maybe) so that at a glance you can see that some items already
> have comments. The admins would always go to a separate screen to
> see all comments, organized by line item, and read or respond to
> them there, instead of on the admin screen where they are
> performing their other tasks.

This seems like a perfectly fine idea, although the speech-bubble
icon with exclamation mark might be a little hard for users to figure
out. Why not just use a short text link: "Add a comment"? This is
sort of the weblog convention, which you might also want to copy for
the comments-count information. You should be able to fit "Comments:
6 | Add a comment" pretty neatly anywhere you need it. You could
possibly keep the comment form itself hidden until the "add a
comment" link is clicked, when you reveal it with Javascript. Pretty
standard stuff, I guess.

6 Feb 2006 - 11:54am
Juan Lanus
2005

You might want to take a look at
http://www.walterzorn.com/tooltip/tooltip_e.htm
--
Juan Lanus
TECNOSOL
Argentima

6 Feb 2006 - 4:10pm
James Melzer
2004

Someone just pointed me to this, which you may draw inspiration from:

http://30boxes.com/
hint: try clicking one of the days

~ James

On 2/6/06, Juan Lanus <juan.lanus at gmail.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> You might want to take a look at
> http://www.walterzorn.com/tooltip/tooltip_e.htm
> --
> Juan Lanus
> TECNOSOL
> Argentima
> ________________________________________________________________
> 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
>

--
James Melzer
http://www.jamesmelzer.com
http://del.icio.us/jamesmelzer

8 Feb 2006 - 5:06pm
Oleh Kovalchuke
2006

On 2/5/06, Andrew Otwell <andrew at heyotwell.com> wrote:

Why not just use a short text link: "Add a comment"? This is
> sort of the weblog convention, which you might also want to copy for
> the comments-count information. You should be able to fit "Comments:
> 6 | Add a comment" pretty neatly anywhere you need it.

How about this for line-by-line comments functionality? Line-by-line
"# comments" text with mouseover analogous to that used by Amazon (do
mouseover of book cover here for example: http://tinyurl.com/8x5xq ).
In addition to "tool tips" view of the comments, you include "Add
comment" field right below the comments (where Amazon puts "Search
Inside This Book" box). In this case it would make sense to put Add a
comment field/button with the comments - this saves space on the main
"busy" form and prevents comment redundancy by forcing admins to take
a look at other's comments before writing their own, besides the
excise of mouseover to reach the functionality is low.

--
Oleh Kovalchuke

> [Please voluntarily trim replies to include only relevant quoted material.]
>
>
> > This will lead to extremely busy screens filled with comment
> > boxes. I am thinking about taking all the comment boxes off and
> > putting a comments icon next to each item instead - maybe a speech
> > bubble - that the admins can click to open a separate window where
> > he or she can enter the comment specifically associated with that
> > item. I can put something in the speech bubble (an exclamation
> > mark maybe) so that at a glance you can see that some items already
> > have comments. The admins would always go to a separate screen to
> > see all comments, organized by line item, and read or respond to
> > them there, instead of on the admin screen where they are
> > performing their other tasks.
>
> This seems like a perfectly fine idea, although the speech-bubble
> icon with exclamation mark might be a little hard for users to figure
> out. Why not just use a short text link: "Add a comment"? This is
> sort of the weblog convention, which you might also want to copy for
> the comments-count information. You should be able to fit "Comments:
> 6 | Add a comment" pretty neatly anywhere you need it. You could
> possibly keep the comment form itself hidden until the "add a
> comment" link is clicked, when you reveal it with Javascript. Pretty
> standard stuff, I guess.
>

8 Feb 2006 - 5:27pm
Oleh Kovalchuke
2006

Or Google Mail "Expand and Reply" approach (use "# Comments" to
expand/show comments and "Add Comment" instead of "Reply").

By the way, about that Amazon's "Look Inside" arrow, which should
invite the mousover - it is visually not inviting at all (or not
intuitive as case might be). Perhaps a visual metaphor of slightly
open book cover with repositioned arrow "Look Inside" would work
better.
--
Oleh Kovalchuke

> How about this for line-by-line comments functionality? Line-by-line
> "# comments" text with mouseover analogous to that used by Amazon (do
> mouseover of book cover here for example: http://tinyurl.com/8x5xq ).
> In addition to "tool tips" view of the comments, you include "Add
> comment" field right below the comments (where Amazon puts "Search
> Inside This Book" box). In this case it would make sense to put Add a
> comment field/button with the comments - this saves space on the main
> "busy" form and prevents comment redundancy by forcing admins to take
> a look at other's comments before writing their own, besides the
> excise of mouseover to reach the functionality is low.
>
> --
> Oleh Kovalchuke
>
>

8 Feb 2006 - 5:52pm
Juan Lanus
2005

It's also possible, in an HTML page, to let the user select text and
right-click it for to open a contextual menu offering something like
"write a comment".

Not as specific a target, also an advised user can click any paragraph
to make the application open a comment input dialog.

This can be done with JavaScript and HTML.

The Amazon popup Oleh mentions is very nice. It's similar to the
JavaScript DHTML tooltips I mentioned before, found in
http://www.walterzorn.com/tooltip/tooltip_e.htm
and apparently easy to implement (I did not use it yet, only read the
javascript, it looks simple).

All these approachs are for "advised users", i.e. users that knows
they are enabled to do such things. Well, in *my* design ... :-)
Because I'd tend to build a page with the bare text and all the extra
functionality made as invisible as possible, coming into play only on
request.

About comments, there is also the Amaya way. Amaya is a browser by the
W3C that lets you edit the pages you are reading. It's still buggy and
not as feature-rich as Mozilla or MSIE. But is has a means to add
"annotations" to a text selection or the whole document, it's
interesting to see. Annotated text is despicted with a small pencil
near it.
Amaya is free and can be found in http://www.w3.org/Amaya/User/BinDist.html
IMO version 8 is more stable than version 9. I use it full time as my
agenda and notepad.
--
Juan Lanus
TECNOSOL
Argentina

8 Feb 2006 - 7:03pm
Lyle Kantrovich
2005

On 2/5/06, gleija at comcast.net <gleija at comcast.net> wrote:
> This will lead to extremely busy screens filled with comment boxes. I am thinking about taking all the comment boxes off and putting a comments icon next to each item instead - maybe a speech bubble - <snip>
>
> I'd love to know if anyone has resolved a similar interaction design issue.

I'd also suggest looking at Gmail (Google's email service) for some
inspiration. They do a good job of providing the right "tip" of the
necessary funcationality. As Oleh mentioned, they have a small box
that "expands" when you start typing (a reply) into it. You might
also find the "check spelling" and "save draft" (autosave) options of
interest.

--
Lyle

--------------------------
Lyle Kantrovich
Blog: Croc O' Lyle
http://crocolyle.blogspot.com

Usability Professionals' Association
http://www.usabilityprofessionals.org

Syndicate content Get the feed