Activate your free membership today | Log-in

Wednesday, January 25th, 2006

Design Pattern: Read/Write Div

Category: Editorial

<>p>Jonathan Boutelle has written about, what he calls, the Read/Write Div pattern.

What is the Read/Write Div pattern?

A new AJAX convention cropping up in a few places, one that is easy to implement and has real benefit to end users. I haven’t found a description of it anywhere, so I thought I’d write it up here.

The basic idea is that user controls (typically for editing the displayed data) should be hidden from the user until needed. At “rest”, an area of the screen displays information in read-only fashion.

Why the Read/Write Div Works

Fewer controls means that the user has to make fewer choices before taking an action, and therefore it takes less time for the user to choose which item to click on. The technical term for this effect is “Hicks Law”.

Also, the “read-only” view of the data takes up much less space than the “read-write” view does, so much more information can be packed into a given page, which means that the user doesn’t have to scroll down to read content. Avoiding the scrolling saves the user a measureable amount of time while browsing (3.05 seconds, according to my back-of-the-envelope GOMS keystroke analysis).

ReadWrite Div Pattern

Related Content:

  • DIV
    DivX Movie ( DivXNetworks...
  • ZTH
    DivX Connected Theme ( DivX...
  • DVX
    DivX Movie ( DivXNetworks...
  • DXU
    DivX File ( DivXNetworks...
  • DAPROJ
    DivX Author Project File ( DivX...

Posted by Dion Almaer at 2:09 am
14 Comments

+++--
3.8 rating from 22 votes

14 Comments

I agree with the commenter on the original blog. This isn’t an AJAX pattern so much as a Javascript pattern. I would have also preferred the more typical pattern writing style of starting with the forces and the problem before describing the solution and result. Having said all that, starting to name common Javascript idioms is useful.

Comment by Jason Yip — January 25, 2006

FWIW The AjaxPatterns wiki demo (http://www.ajaxify.com/run/wiki/) uses this – I think it would be great if real wikis (and blogs etc) used it too.
I originally called the pattern Microcontent – you can find some examples at http://ajaxpatterns.org/Microcontent, e.g. Flickr’s photo caption. However, that was a silly name that combined separate concepts – I’m now calling it “Malleable Content” (though I like “Read-Write” too).

Comment by Michael — January 25, 2006

Michael,

Yup, your Microcontent/Malleable Content pattern looks like what I’m talking about (and is much more thorough than my little writeup).

I’m a huge fan of the ajaxpatterns site, can’t believe I missed it.

Anyway, there’s probably value in laying out simple examples that people can absorb in 30 seconds rather than 5 minutes. The “typical pattern writing style” can sometimes be a little pondorous to read, though it is thorough.

Do you buy my explanation for why this pattern works?

Comment by Jonathan Boutelle — January 25, 2006

Tim Taylor calls this “Edit-in-place”, http://tool-man.org/examples/edit-in-place.html. This is based on Alan Cooper’s idiom “Allow input wherever you have output”, and it’s what makes the To-Do list over at 37-signals so darn easy to use. The directness of this pattern very refreshing and I definitely hope more sites adopt the practice.

Comment by Mike Ritchie — January 25, 2006

아�고 �테리어 소품 홈페�지를 오픈하였습니다, http://www.amingo.co.kr/
�테리어소품 쇼핑몰, 오리엔탈, 쿠션, 러그, 아로마, 주방용품, 테�블웨어, 조개발 �매를 국내 최고 품질과 최저가격� ��함니다,
앞으로 보다 나� 서비스를위해 최선� 다하겠습니다,

Comment by ì•„ë°?ê³  — January 26, 2006

오소리나� 홈페�지를 오픈하였습니다, http://osorynara.com/
�약청 기능성 �� 받� 여드름, 미백, 피부�양공급, 피부진정, 화�트��림, �질제거, 피지관리, 잡티피부관리 화장품�
�거래 �매함니다, (고�불만족시 100%환불)
앞으로 보다 나� 서비스를 위해 최선� 다하겠습니다,

Comment by 오소리나ë?¼ — January 26, 2006

“개미박멸,바퀴박멸 전문 친환경홈페ì?´ì§€ë¥¼ 오픈하였습니다”
http://www.chinclean.com/
개미, 바퀴벌레, �종벌레�출고민�시죠, 친환경�서 책임지고 박멸하겠습니다,
�단 들어오셔서 너무나� 저렴한 가격과 놀�운 살충효과� 대해 한번살펴보세요^^
정� �탄 하실검니다,
개미박멸,바퀴박멸 전문 친환경�
앞으로 보다 나� 서비스를위해 최선� 다하겠습니다,

관리�님 게시�성격� 맞지않는 게시글��면 죄송함니다,
삭제비번� 0000입니다,

Comment by 친환경 — February 22, 2006

(���편집) 누구나 필요한 정보입니다.

*�글� �하지 않으시면 싸�트 주소를 메�로 보내주시면, 통신법� �거

다�부터는 절대로 글� 올�가지 않�� 조치 하겠습니다.

(�메� 주소 : yeol6012@hotmail.com)

“안녕 하세요”

*í™?ë³´ì˜?ìƒ?제작,ë?™ì˜?ìƒ?(비디오)편집,제작,CD/DVDí™”ì?¼ë³€í™˜,비디오테ì?´í”„복사 등…

*** 문�전화 : 0505-900-3200, 016-735-3200, 032-512-0379***

1. �종 기업광고 제작 (기업�보 �� � 전� 메뉴얼,가든,뷔페,�당,

제품광고등…)

2. ì?¸í„°ë„· í™?ë³´ ë°? ìž?료ì˜?ìƒ? (기업,관공서,í•™ì›?,í•™êµ?,유치ì›?,ìš”ì‹?업등…)

3. ê°?종 êµ?육 í™?ë³´ ì˜?ìƒ? 제작 (기업,연수ì›? í•™ì›?,유치ì›?등…)

4. ê°?종 행사 ì´¬ì˜?ë°? 편집 (기업, í•™êµ?, 관공서,단체등…)

5. CD, VCD, DVD í™”ì?¼ë³€í™˜ ë°? 복사 (결혼,ë?Œ,회갑,칠순,ê°?종 행사등…)

6. 비디오 테�프 복사

7. �녀들� 성장 기� �� 제작 (출�부터 현재까지)

8. 사진 ì˜?ìƒ? 앨범 제작 (결혼,ë?Œ,회갑,칠순,ê°?종행사 등…)

9. 여행 비디오 편집 (가정, 여행사, 단체등…)

10. 부모님� �대기 �� 제작

11. 웨딩, ë??, 회갑 ì´¬ì˜?ë°? 편집

12. � 가정 캠코� 촬�물 편집

13. 사랑� 위한 �벤트 �� 제작 (특별 �벤트 �품 : �금 사정� 맞춤)

14. �� �서전, 프로�즈��등 제작

15. 졸업작품 ��제작

16. 유치�,기업,학�,학� 전�앨범 제작

***홈페�지 : http://www.kvsvideo.co.kr

***�메� : yeol6012@hotmail.com

jinsungky@korea.com

***고�여러분� 편리� 위해 �요�� 근무 합니다.***

***�사 합니다. 행복한 하루가 �시길 바�니다.***

+++주�님� 허�없� �렇게 글� 올려 죄송 합니다.+++

+++주�님� 홈페�지� 맞지 않는 글�면 정중히 사과 드립니다.+++

+++수신ì?„ ì›?하지 않으실 경우엔 “홈페ì?´ì§€ 주소”를 ì €ì?˜ ë©”ì?¼ë¡œ ë³´ë‚´ 주시면

다� 부터는 글� 올리지 않겠습니다.(yeol6012@hotmail.com)+++

+++삭제 비밀번호 : 0379입니다.

Comment by 편집실 — March 2, 2006

“ì?´ì?œì˜·ë§Œ 파는 가시나가 새로 계편하여 오픈 하였습니다”
http://gacina.com/
개편�밴드로 무료로 회�가입시 현찰과 ��하게 사용하실수있는
1000��트를 나누어어드리며 구매시 500��트를 � 나누어 드리고 있습니다,
�단 들어오셔서 너무나� 저렴한 가격� 고�� 눈�서 ��옷만 전문�으로
�매하고� 함니다,

앞으로 보다 나� 서비스를위해 최선� 다하겠습니다,

관리�님 게시�성격� 맞지않는 게시글��면 죄송함니다,
삭제비번� 0000입니다,

관리�님 게시�성격� 맞지않는 게시글��면 죄송함니다,
삭제비번� 0000입니다,

Comment by 가시나 — March 5, 2006

http://good82.wo.to

구경 하시고 가세요.. 골�잡으면 싸게 드립니다..

http://good82.wo.to

http://good82.wo.to

Comment by a급 — March 8, 2006

▶ �/작 촬/� �/� 셀/프 카/메/� 셀/프 비/디/오 완/전 대/공/개

리.얼.�.르.노 DVD 야.�

http://www.enjoy.kr.tc

http://www.enjoy.kr.tc

http://www.enjoy.kr.tc

##############################################

# 누구나 가능한 ì´ˆ/ê³ /ì†? ë?™/ì˜?/ìƒ? 다/ìš´/ë¡œ/ë“œ ì„œ/비/스…

##############################################

http://www.enjoy.kr.tc

http://www.enjoy.kr.tc

http://www.enjoy.kr.tc

삭/제/시 비/밀/번/호 : cs1234

Comment by 김정준 — March 9, 2006

경제�황� 어려우신가요?

가난� 3대가 대물림 �다고 함니다.

여기 가난�서 벗어나려는 사람들� 모임� 있습니다.

�릭해 보세요^^

��� 홈페�지 : http://www.powerbiznet.com

삭제시 비번� 1111입니다.

Comment by 알리미 — March 10, 2006

http://pcgostop.com

첫가입시 무료머니 5000칩
즉시 출금 �니다..

http://pcgostop.com

http://pcgostop.com

Comment by ì?´ì?€í•˜ — March 11, 2006

http://pcgostop.com

첫가입시 무료머니 5000칩
즉시 출금 �니다..

http://pcgostop.com

http://pcgostop.com

Comment by ê¹€ì?€í?¬ — March 14, 2006

Sorry, the comment form is closed at this time.