CHI-WEB Archives

ACM SIGCHI WWW Human Factors (Open Discussion)

CHI-WEB@LISTSERV.ACM.ORG

Options: Use Forum View

Use Proportional Font
Show Text Part by Default
Condense Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Sender:
"ACM SIGCHI WWW Human Factors (Open Discussion)" <[log in to unmask]>
X-To:
Ulrik Gade <[log in to unmask]>
Date:
Mon, 11 Jun 2007 09:07:03 +0200
Reply-To:
Mathijs Panhuijsen <[log in to unmask]>
Subject:
MIME-Version:
1.0
Content-Transfer-Encoding:
quoted-printable
Content-Type:
text/plain; charset="us-ascii"
From:
Mathijs Panhuijsen <[log in to unmask]>
Parts/Attachments:
text/plain (96 lines)
Hello Ulrik,

I've just been working on a product that allows its users to edit Web
pages inline. There, too, we sought to minimize the visual clutter
because it would easily obscure the content of the Web page (which we
had no control over).

Our solution was to draw nonobtrusive borders around editable areas that
light up ever so slightly as you hover your mouse over them. We also
included a button to hide those borders so the user could see the Web
page without having to leave edit mode. Also, because we couldn't know
the contents of the Web page, we chose border colors that were likely to
contrast with most common colors on the Web, and we made those border
colors configurable.

Only when a user clicks inside an editable area does the user get to see
a blinking cursor, a toolbar etc. Clicking outside the area returns the
area to its normal, bordered state.

Hope this helps,

Mathijs Panhuijsen
Technical Writer
SDL Tridion


-----Original Message-----
From: ACM SIGCHI WWW Human Factors (Open Discussion)
[mailto:[log in to unmask]] On Behalf Of Ulrik Gade
Sent: Sunday, June 10, 2007 10:55
To: [log in to unmask]
Subject: Visual cues for in-place editing?

Hi,

I'm involved in a redesign for a business web app. We'd like to reduce
the
clutter of controls in columnar displays of numbers by only displaying
the
input control during actual editing of a data item, i.e. grid style
in-place
editing though these are not strictly grids.

However, not all numbers may be edited at all times so we need a graphic
technique to give users visual cues about which numbers s/he may/not
edit at
any one time. Do you have any suggestions for good solutions to this?
(Please provide screen shots as well as URLs as some sites are
unfortunately
censored in this country).

I'm also interested in suggestions for interactive (hover) effects to
enhance the perception of editing affordance. But these are the main
concern
for this request.

Thanks for any replies. I'll summarize to the list if you prefer to
respond
to privately.


/Ulrik

-- 
Ulrik H. Gade
Usability Designer
c/o Marcura FZE
PO Box 54614
Office no. 204, West Wing 3
Dubai Airport Free Zone
Dubai, United Arab Emirates
Home: +971 (0)4 2888 147
Mobile: +971 (0)50 653 6181
Fax: +971 4 299 7923
E-mail: [log in to unmask]

The journey of a thousand miles starts with a single step

    --------------------------------------------------------------
    Tip of the Day: Use the archives to research common questions
     CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]
       SUBSCRIPTION CHANGES & FAQ:  www.sigchi.org/web/faq.html
    --------------------------------------------------------------



.This e-mail is intended exclusively for the addressee(s),and may not be passed on to, or made available for use by any person other than the addressee(s).Tridion rules out any and every liability resulting from any electronic transmission.

    --------------------------------------------------------------
    Tip of the Day: Suspend your subscription if using auto replies
     CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]
       SUBSCRIPTION CHANGES & FAQ:  www.sigchi.org/web/faq.html
    --------------------------------------------------------------

ATOM RSS1 RSS2