tag:blogger.com,1999:blog-227830062024-03-07T04:23:55.592-05:00HCI User AdvocateSoftware makers and users often have conflicting goals - with the makers winning. Yet they all too often shoot themselves in the foot by distrusting the users - their customers. Or worse, maltreating them. It is time to get angry about bad and malicious software design. This Blog calls software designers on the carpet - giving them credit and shame where they deserve it.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.comBlogger62125tag:blogger.com,1999:blog-22783006.post-6656055529251857102016-04-01T09:03:00.000-05:002016-04-01T09:03:28.817-05:00Researchers Harness the Power of Quantum User Interfaces<div class="MsoNormal" style="background: white;">
<a href="http://www.cs.umd.edu/~ben/"><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Ben
Shneiderma</span>n</a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"> and </span><a href="http://www.cs.umd.edu/~bederson/"><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Ben Bederson</span></a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">April 1, 2016 <o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<!--[if gte vml 1]><v:shapetype
id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_s1026" type="#_x0000_t75"
style='position:absolute;margin-left:287pt;margin-top:6.2pt;width:184.55pt;
height:167.75pt;z-index:251658240;visibility:visible;mso-wrap-style:square;
mso-width-percent:0;mso-height-percent:0;mso-wrap-distance-left:9pt;
mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;
mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;
mso-position-horizontal-relative:text;mso-position-vertical:absolute;
mso-position-vertical-relative:text;mso-width-percent:0;mso-height-percent:0;
mso-width-relative:page;mso-height-relative:page'>
<v:imagedata src="file://localhost/Users/bederson/Library/Group%20Containers/UBF8T346G9.Office/msoclip1/01/clip_image001.png"
o:title=""/>
<w:wrap type="square"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9flwx-Ms1XyM6JF4kHX1hufyoiL4m7pHxgEYLOtGKArEKzhJ2B4Bn72mwiqRnup1tGuXJ0DYMFipHePU5PGYLZhpXlIdpxu5W7oq3ZFtHeGggzVFMrw-PKrBfMjS2alk0Xa_ow/s1600/QUI+figure.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9flwx-Ms1XyM6JF4kHX1hufyoiL4m7pHxgEYLOtGKArEKzhJ2B4Bn72mwiqRnup1tGuXJ0DYMFipHePU5PGYLZhpXlIdpxu5W7oq3ZFtHeGggzVFMrw-PKrBfMjS2alk0Xa_ow/s200/QUI+figure.png" width="200" /></a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Researchers announced an astonishing breakthrough by creating
Quantum User Interfaces (QUIs) which promise to deliver remarkable increases in
user capabilities. The startling idea is to replace millions of
user actions with a single action that accomplishes a full month or
year of work. A simple metaphor that conveys the power of quantum
user interfaces is the well-established global search and replace
command. Using a traditional Graphical User Interface (GUI), a large
database could be updated by changing thousands of occurrences of “coffee” with
“tea” manually while a single global search and replace command could make the
change much more rapidly. However, even the best modern GUIs have no way to
speed up more complex tasks such as making many versions of a document for
different audiences. With a QUI, a user could specify several kinds of drinks
and entrees simultaneously, and all versions of the document would exist at
once and be available for any purpose. With a QUI, the user can do in one step
what might take hours to otherwise accomplish. Researchers have come
forward with many powerful examples.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">QUIs are different than GUIs which are based on discrete
operations. While some GUIs can be automated to speed them up or parallelized
through collaborative computing approaches, QUIs work by user interfaces which
can be in a superpositions of states. That is, some graphical elements can be
in multiple states at the same time – so, for example, a button can be both
pressed and not pressed simultaneously. This enables vast speedups by going
beyond the </span><a href="https://en.wikipedia.org/wiki/Human_processor_model"><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri;">Model Human Processor</span></a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"> and software architectures such as </span><a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri;">Model-View Controller</span></a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">. However, they do not violate our basic understanding of </span><a href="https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction"><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri;">Human-Computer Interaction</span></a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"> and bedrock HCI principles such as </span><a href="https://en.wikipedia.org/wiki/Fitts%27s_law"><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri;">Fitts’ law</span></a><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;"> remains intact.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">The power of QUIs is measured by counting the number of GUI
commands that are replaced by a single “quantum user interface click”, commonly
called QUICKS. Many of the projects yield 1,000 QUICKS but some show the
possibility of 1,000,000 QUICKS (1 mega-QUICK). Longer-term hopes are to
push toward giga-QUICK and peta-QUICK designs.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Certain problems can be solved much more quickly with QUIs than
with traditional GUIs. Even those GUIs that use the best currently known
approaches such as Direct Manipulation, Gestalt Theory for visual design, and
Collaborative Computing approaches can be dramatically sped up. For example, Doctoral
student Ambrose Light’s work at the University of Maryland’s Human-Computer
Interaction Lab conveys the exponential increases in user abilities that
researchers expect QUIs will bring. Ambrose has documented 3 mega-QUICK
speed ups in complex tasks such as replacing the work of teams of citizen
scientists by executing a single command. By configuring the geographical
database to include the possibility of a bird sighting or not of every known
species at every location simultaneously, the mechanical data entry of each
observation is replaced with simple confirmation. This command is called the
“gather” operation since it can bring millions of bird sightings into a nearly
error-free database within 1-2 hours.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Similarly, doctoral student Hadassah Agrawala at the
University of Washington, has demonstrated a QUI with unheard of power to help
job-seekers by listing themselves as both interested and not interested at
every company that has open jobs listed which is expected to dramatically
reduce national unemployment by a full percentage point. This QUI enables
job-seekers to issue a single command that returns a precisely selected set of
job descriptions from dozens of independent databases. Then the QUI
filters them into a single file, organized geographically, and ranked by
similarity to the users’ abilities. Hadassah reports performance in the
50-70 mega-QUICK range. She has launched a startup company, QUICKJOB that
has already drawn $11.7M in funding, and will provide a public service, for a
fee, within three months.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Even as QUIs become commercially available, other
researchers are already racing off to the even more ambitious String User
Interfaces (SUIs) that depend on the vibrational structure of queries as they spread
through exo-scale databases. SUIs would replace hierarchical file structures
with wave-like superposition files, in which even high-dimensional
intersections are resolved in less than a millisecond. By using
relativistic compensations, searches that used to take hours can be performed by
novice users in seconds. While still expected to be 5 years away from
commercialization, SUIs can combine action and reaction in a single operation.
QUICKJOB has already filed a provisional patent application showing how
employers can react by simultaneously offering and not offering jobs to all the
applicants and having the vibrational equilibrium perform the proper matching
so exactly the right applicants end up with job offers. Skeptics are not
yet convinced that these results are guaranteed to perform the right matches, and
are currently modeling whether a combination of money saved through speedups
and legal protections through provisional employment contracts would provide
benefit overall. Clearly this approach is promising enough as there has been a
chain reaction of openly published papers (see arXiv.org) claiming ever greater
abilities for SUIs.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white;">
<br /></div>
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves>false</w:TrackMoves>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>JA</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="false"
DefSemiHidden="false" DefQFormat="false" DefPriority="99"
LatentStyleCount="380">
<w:LsdException Locked="false" Priority="0" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 9"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 9"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footnote text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="header"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footer"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index heading"/>
<w:LsdException Locked="false" Priority="35" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="table of figures"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="envelope address"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="envelope return"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footnote reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="line number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="page number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="endnote reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="endnote text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="table of authorities"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="macro"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="toa heading"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 5"/>
<w:LsdException Locked="false" Priority="10" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Closing"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Signature"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="true"
UnhideWhenUsed="true" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Message Header"/>
<w:LsdException Locked="false" Priority="11" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Salutation"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Date"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text First Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text First Indent 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Heading"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Block Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Hyperlink"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="FollowedHyperlink"/>
<w:LsdException Locked="false" Priority="22" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Document Map"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Plain Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="E-mail Signature"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Top of Form"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Bottom of Form"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal (Web)"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Acronym"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Address"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Cite"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Code"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Definition"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Keyboard"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Preformatted"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Sample"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Typewriter"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Variable"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal Table"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation subject"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="No List"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Contemporary"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Elegant"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Professional"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Subtle 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Subtle 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Balloon Text"/>
<w:LsdException Locked="false" Priority="39" Name="Table Grid"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Theme"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 9"/>
<w:LsdException Locked="false" SemiHidden="true" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" SemiHidden="true" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" QFormat="true"
Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" QFormat="true"
Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" QFormat="true"
Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" QFormat="true"
Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" QFormat="true"
Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" QFormat="true"
Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" SemiHidden="true"
UnhideWhenUsed="true" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="TOC Heading"/>
<w:LsdException Locked="false" Priority="41" Name="Plain Table 1"/>
<w:LsdException Locked="false" Priority="42" Name="Plain Table 2"/>
<w:LsdException Locked="false" Priority="43" Name="Plain Table 3"/>
<w:LsdException Locked="false" Priority="44" Name="Plain Table 4"/>
<w:LsdException Locked="false" Priority="45" Name="Plain Table 5"/>
<w:LsdException Locked="false" Priority="40" Name="Grid Table Light"/>
<w:LsdException Locked="false" Priority="46" Name="Grid Table 1 Light"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark"/>
<w:LsdException Locked="false" Priority="51" Name="Grid Table 6 Colorful"/>
<w:LsdException Locked="false" Priority="52" Name="Grid Table 7 Colorful"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 1"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 1"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 1"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 1"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 1"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 2"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 2"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 2"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 2"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 2"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 3"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 3"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 3"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 3"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 3"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 4"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 4"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 4"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 4"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 4"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 5"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 5"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 5"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 5"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 5"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 6"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 6"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 6"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 6"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 6"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="46" Name="List Table 1 Light"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark"/>
<w:LsdException Locked="false" Priority="51" Name="List Table 6 Colorful"/>
<w:LsdException Locked="false" Priority="52" Name="List Table 7 Colorful"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 1"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 1"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 1"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 1"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 1"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 2"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 2"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 2"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 2"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 2"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 3"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 3"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 3"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 3"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 3"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 4"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 4"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 4"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 4"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 4"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 5"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 5"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 5"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 5"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 5"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 6"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 6"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 6"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 6"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 6"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 6"/>
</w:LatentStyles>
</xml><![endif]-->
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:Calibri;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}
</style>
<![endif]--><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
<!--StartFragment-->
<!--EndFragment--><br />
<div class="MsoNormal" style="background: white;">
<span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-hansi-font-family: Calibri;">Worldwide attention is gathering for the July
16-18 Symposium on Quantum User Interfaces: New Technologies (SQUINT) to
be held in College Park, MD. Conference Chair Ben Neb hints at further
breakthrough announcements that have enticed participation by large numbers of
journalists, venture capitalists, and government agency funders.</span><span style="font-size: 11.0pt; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri;"><o:p></o:p></span></div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com6tag:blogger.com,1999:blog-22783006.post-26871405837846596522015-10-15T12:20:00.001-05:002015-10-15T12:20:55.042-05:00Seeking nominations for SIGCHI Awards<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SIGCHI seeks nominations for its five major annual awards. All nominations are due by </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">November 15, 2015</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<b id="docs-internal-guid-0144aac8-6c84-a738-a27b-579b66334ddb" style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SIGCHI identifies and honors leaders and shapers of the field of human-computer interaction with the SIGCHI Awards. We recognize individuals who have contributed to the advancement of the field of human-computer interaction. There are five kinds of SIGCHI Awards that are selected by two committees based on your nominations, so please submit them! We encourage you to consult the SIGCHI Awards web page (</span><a href="http://www.sigchi.org/about/awards" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">www.sigchi.org/about/awards</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">) for past awardees and more detailed award descriptions.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The SIGCHI Achievement Awards committee selects the following three awards. Submit nomination material to </span><a href="mailto:sigchi-achieve-awards@acm.org" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">sigchi-achieve-awards@acm.org</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, to the attention of </span><a href="http://www.cs.columbia.edu/~feiner/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Steve Feiner</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> (CHI Academy Member) who is the committee chair:</span></div>
<b style="font-weight: normal;"><br /></b>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SIGCHI Lifetime Research Award:</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Individuals who have contributed the very best work in shaping the field, SIGCHI's highest honor for research contributions.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SIGCHI Lifetime Practice Award:</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Individuals who have made outstanding contributions to the practice, application, and understanding of human-computer interaction, SIGCHI's highest honor for practice contributions.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">CHI Academy:</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Individuals who have made substantial contributions to the field of human-computer interaction should include a summary of the person's contributions with evidence of the cumulative contribution, influence of the work on others, and development of new directions.</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The SIGCHI Service Awards committee selects the following two awards. Submit nomination material to </span><a href="mailto:sigchi-service-awards@acm.org" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">sigchi-service-awards@acm.org</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, to the attention of </span><a href="http://www.cs.umd.edu/~bederson/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Ben Bederson</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> (SIGCHI Adjunct Chair for Awards) who is the committee chair:</span></div>
<b style="font-weight: normal;"><br /></b>
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SIGCHI Social Impact Award:</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Individuals who through their work have made substantial contributions to pressing social needs.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SIGCHI Lifetime Service Award:</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Individuals who have contributed to the growth and success of SIGCHI through extended service to the community over a number of years.</span></div>
</li>
</ol>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.4903999675403954; margin-bottom: 8pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nominations should include:</span></div>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.4903999675403954; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">a brief summary (maximum one page, preferably a PDF) of how the nominee meets the criteria for the award.</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.4903999675403954; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(optional) a link to the nominee's CV, if available</span></div>
</li>
<li dir="ltr" style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.4903999675403954; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(optional) names and contact information of people who both endorse and are knowledgeable about the qualifications of the nominee.</span></div>
</li>
</ul>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">All nominations must be submitted by </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">November 15, 2015</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. General questions can be sent to </span><a href="mailto:sigchi-ac-awards@acm.org" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">sigchi-ac-awards@acm.org</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-12607552417066840072015-01-02T16:09:00.003-05:002015-01-02T16:12:50.606-05:00Books I've Read VisualizationI am the product of my experiences, and a significant part of my lifetime experiences are the books I have read. Strangely enough, I have kept track of every non-work (and many work-related) books that I have read since 1991. I used to write these down on paper, but a few years ago I started keeping track of them on goodreads.com. Goodreads is a fine service, and offers a nice way to see what your friends are reading.<br />
<div>
<br /></div>
<div>
But Goodreads does not offer any way of seeing any overview of the books one has read, and loses the opportunity to gain any insight into a person's overall readings.</div>
<div>
<br /></div>
<div>
So I created an interactive visualization to try and understand what the 246 books I read over the last 24 years actually were. Go try out the <a href="http://www.cs.umd.edu/~bederson/books_read/">interactive visualization</a> (which is not mobile friendly), and then finish reading this. The visualization is based on <a href="https://github.com/adilyalcin/Keshif/wiki">Keshif</a>, a free and general tool built by <a href="http://adilyalcin.me/">Adil Yalcin</a>, a grad student working with me. It works by showing "facets" of the dataset and supports very lightweight exploration by mousing over the facets to see how they interact with other facets. For example, in 2014, I read a lot by <a href="http://www.hughhowey.com/">Hugh Howey</a> (I loved Wool!), and those books were mostly written in 2009 or later. Also, I clearly got re-hooked on science fiction.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.cs.umd.edu/~bederson/books_read/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Js4f748HbNCPU45V-5qnRLD4wIuPPeIj-9l27E8n_sBb-6H131fuXxVRsYifuJQqSz0wLZYMKVFlnMYG7TVE8RNp2ziK6fJKMkkBrdwiWww7bwJhFg22HysAZMs5tg95zMWaBA/s1600/books_read.png" height="275" width="400" /></a></div>
<div>
<br /></div>
<div>
This approach lets you see things like most commonly read authors and genres. Also when I read books. For example, you can see that I read a lot in 1992 right after I finished my B.S. during my "gap year" when I lived in Alaska. I also started reading significantly more books 3 years ago - exactly when I bought my Kindle - which seems to be <a href="http://www.wsj.com/articles/SB10001424052748703846604575448093175758872">consistent with what others have found</a>.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oVcuCMwH2hvEbryifqWIC_OK1lT8TeWqQHY0LuoI2Obuu8nLjCO4cKr1_X2PRhy4q-s-K4-m_P_mRmVG_aw-JUs3IP3OzrcbOCrUOWsVDruKXPn8CN-YaSVmnt5C_Nu2H3rIBQ/s1600/books_authors.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oVcuCMwH2hvEbryifqWIC_OK1lT8TeWqQHY0LuoI2Obuu8nLjCO4cKr1_X2PRhy4q-s-K4-m_P_mRmVG_aw-JUs3IP3OzrcbOCrUOWsVDruKXPn8CN-YaSVmnt5C_Nu2H3rIBQ/s1600/books_authors.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6oVcuCMwH2hvEbryifqWIC_OK1lT8TeWqQHY0LuoI2Obuu8nLjCO4cKr1_X2PRhy4q-s-K4-m_P_mRmVG_aw-JUs3IP3OzrcbOCrUOWsVDruKXPn8CN-YaSVmnt5C_Nu2H3rIBQ/s1600/books_authors.png" height="148" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctzknWfPSO_FJFr1IYN2SPmXyWZuCrc-f19p8KGdjUXOe4H4QPV_zBZWFxm4bcRR3yZCpPuAqsaa-58B0b3T_UKvMZ_6WtAkybgyCmvVWpbbIUUQ4I2UBVnGmOjrUhW5z83akLw/s1600/book_genres.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctzknWfPSO_FJFr1IYN2SPmXyWZuCrc-f19p8KGdjUXOe4H4QPV_zBZWFxm4bcRR3yZCpPuAqsaa-58B0b3T_UKvMZ_6WtAkybgyCmvVWpbbIUUQ4I2UBVnGmOjrUhW5z83akLw/s1600/book_genres.png" height="168" width="200" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoE1VabSdnvR4qLyQ4-1HWx9J0-VLSan8jA6O2996EJ2y8ATG-MH1pYyJGavY3IzblAP5alqP24HmdndujW0Fu3asV4vjDwR7vGsZvUvlXYmEXye5zYCOC7bu7RI3-dgl6MTbRg/s1600/book_years_read.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoE1VabSdnvR4qLyQ4-1HWx9J0-VLSan8jA6O2996EJ2y8ATG-MH1pYyJGavY3IzblAP5alqP24HmdndujW0Fu3asV4vjDwR7vGsZvUvlXYmEXye5zYCOC7bu7RI3-dgl6MTbRg/s1600/book_years_read.png" height="89" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Anyway, take a look and see if you can learn anything else about me. Also, the code is all freely available, and shouldn't be too hard to adapt to your books if you are a bit of a web hacker.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Some technical notes:</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>Data comes straight from <a href="https://www.goodreads.com/api">Goodreads API</a>, but I downloaded it to avoid cross-site permissions issues.</li>
<li>Goodreads does not provide book genres through their API, so I manually created those in a google docs spreadsheet and load them separately and merge the two data sources.</li>
</ul>
<br />
<br />
<div>
<br /></div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-66146453067553470782014-07-25T09:08:00.002-05:002014-08-15T11:59:27.225-05:00New Google Drive design forgets about desktop users<b>Update 8/15/14:</b> Google has fixed this! The list view is now properly dense with about twice as many items as the thumbnail view. Thanks Google!<br />
<br />
I was excited to see Google post their new design for Drive. Given that this is a major new design with no doubt significant thought behind it, I was surprised - and dismayed - to see that the two primary views of documents (list view and thumbnail view) show the same number of documents. The textual list view, typically designed for efficient scanning of large numbers of items based on full title and some metadata shows no more items than the image based view.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Tja5s4pGdvQA-INthVZ-L7xWZxM2vrfBCxI4JNBQp3vwnshXnLqnjTgH8gi1P5ANtwtpgnCcBjkLScESSjE-ssmeWMIa0FooXEotiL2psVvJnxM0jo7hNMuXBwt1JMuLggnkSw/s1600/drive+screenshot.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Tja5s4pGdvQA-INthVZ-L7xWZxM2vrfBCxI4JNBQp3vwnshXnLqnjTgH8gi1P5ANtwtpgnCcBjkLScESSjE-ssmeWMIa0FooXEotiL2psVvJnxM0jo7hNMuXBwt1JMuLggnkSw/s1600/drive+screenshot.png" height="238" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New Google Drive with list view on left, and thumbnail view of same documents on right.</td></tr>
</tbody></table>
<br />
This may seem like an esoteric design detail, except it isn't. It goes to the heart of design decisions where there is a single design that must serve a huge community (probably hundreds of millions of users). Depending on your view, design is driven down to the least common denominator, or perhaps it is better viewed as regression to the mean.<br />
<br />
My guess is that the <b>whole redesign is built to better support touch screen systems</b> given the huge vertical space between items. This is great for all those phone and tablet users, and even the occasional Chromebook Pixel user. But what about us folks in an office with a big screen and a mouse? I know that Apple serves the causal computer using market first, but now even Google has abandoned the regular office worker!<br />
<br />
The reason this is an issue is because the trade-off between these two approaches - at least in my view - is primarily between the density of items, and amount of interaction. That is, one view (typically the thumbnail view) should have fewer items with a sparser layout requiring more interaction to see more items. But the painful and expensive scrolling operation (in comparison to moving your eye) is sometimes worth it because of the additional information made available by the additional information per item. The other view (typically the list view) should have more items with a denser layout so you can quickly scan through many items without having to scroll as much. Arguable, the additional owner and date information in the text view provides the relative advantage, but make no mistake - the text view is a very sparse design.<br />
<br />
No doubt, the major vendors are wise to provide an excellent experience for mobile and touch users. But PLEASE don't abandon us desktop users. Don't make the mistake that Microsoft did with Windows 8. <b>You can not design a single experience for all people and all form factors.</b> You must detect what systems people are using and provide an optimized experience for that design. Or at least offer customization options.<br />
<br />
Interface designers that build a single experience for all humans on the planet or doomed to disappoint huge segments of the market. Don't let this be you.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com1tag:blogger.com,1999:blog-22783006.post-70916844617685224082014-04-06T16:52:00.004-05:002014-04-06T16:52:53.392-05:00My new job: Associate Provost of Learning InitiativesI am excited to start a new job on campus as Associate Provost of Learning Initiative and Executive Director of the Teaching and Learning Transformation Center.<br />
<br />
For those of you wondering why I would give up the world's best job as a professor developing the future of interactive computing technologies: Technology is on the cusp of significantly changing the way that people experience higher education (actually, it already has - from MOOCs to GitHub to YouTube and StackExchange, Twitter, Skype & Google docs...). Now it is poised to change the classroom experience as well. I see this role as an opportunity to apply all that I have learned from my work in the field of HCI over the past 20 years directly to the campus that I love and want to see thrive. From enhanced user experiences to analytics that balances transparency and privacy across multiple stakeholders, this is HCI's time to improve our campus. And if you want to know how I got to this point, then learn about the HCIL - the world's best HCI research group: <a href="http://www.cs.umd.edu/hcil/">http://www.cs.umd.edu/hcil/</a>. (Oh, and of course I can always revert to being a regular faculty member if this doesn't work out...)<br />
<br />
-----<br />
<br />
Dear University of Maryland Faculty:<br />
<br />
I am pleased to announce the formal establishment of the Teaching and Learning Transformation Center (TLTC) and the appointment of Professor Benjamin B. Bederson as the new Associate Provost of Learning Initiatives and founding Executive Director of this new center.<br />
<br />
The TLTC will be the hub on campus that brings together support, incentives, infrastructure, assessment, and innovation for the University's educational mission. It will provide leadership around teaching and learning, including the use of technology to transform the students' and instructors' experiences, both in the classroom and in an online environment. The TLTC will integrate the Center for Teaching Excellence from the Office of Undergraduate Studies and the Learning Technologies and Environments group from Division of IT. It will also add a campus-wide resource in assessment and learning analytics. Together, this critical mass will further promote innovation and excellence in education at both the graduate and undergraduate levels.<br />
<br />
Dr. Bederson (www.cs.umd.edu/~bederson/) is a Professor of Computer Science and prior director of the Human-Computer Interaction Lab at the Institute for Advanced Computer Studies (UMIACS) and iSchool. An ACM Distinguished Scientist, his research is on technology-enhanced education, interaction strategies, crowd sourcing, mobile device interfaces, visualization and digital libraries. He is a widely respected innovator, entrepreneur, and scholar in interactive systems who has worked on a wide variety of interdisciplinary projects, published broadly, and founded a successful mobile apps company.<br />
<br />
Please join me in welcoming Professor Bederson to his new position. Many of you will no doubt hear from him in the coming months as the center is developed. He also asked me to say that he welcomes hearing from you about your concerns and ideas about teaching and learning on campus.<br />
<br />
Mary Ann Rankin<br />
Senior Vice President and ProvostBenhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-71401200399739766042014-03-09T21:04:00.002-05:002014-03-09T21:04:50.714-05:00Google Sheets as website backend storeTwo summers ago, I spent an inordinate amount of time rebuilding my home page using a database and Django so I had a good UI for entering new data. It was a fun learning project, and it worked well, but was very tricky to get configured on my CS dept. controlled server. Fast forward to now. Some small thing broke and I realized it was going to take a long time to figure well enough how things worked so I would be able to fix it. And even if I fixed it, I'd surely have to go through this again the next time it broke.<br />
<br />
<b>Complexity is poor design.</b> So I decided it was time to kill the database and Django and go for a much simpler solution.<br />
<br />
I am now using Google Sheets as my backing store, and have straightforward Javascript that queries the store. The end result is that I deleted TONS of code, removed all the configuration junk, and now have a collaborative editing model for the backend data that drives my (simple website).<br />
<br />
My <a href="http://www.cs.umd.edu/~bederson/">home page</a> uses 3 spreadsheets as data stores - News, Projects, and Recent Publications. Each one is implemented similarly, so I'll include the code here for my News in case anyone wants to try this. It relies on Google's visualization library since Google wrote this to make it easy to use their charts and visualizations based on their spreadsheet data.<br />
<br />
In your HTML, include Google's Javascript API:<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><script src="http://www.google.com/jsapi" type="text/javascript"></script></span><br />
<div>
<br /></div>
<div>
In your Javascript, load Google's visualization library</div>
<div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">// Load Google visualization code to support spreadsheet data fetching</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">if (typeof google !== 'undefined') {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> google.load('visualization', '1', {'packages': []});</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">}</span></div>
</div>
<div>
<br /></div>
<div>
Make sure your spreadsheet is publicly readable, and that store the spreadsheet URL in your code like this.</div>
<div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">var newsSource = '<a href="https://docs.google.com/spreadsheet/ccc?key=0Al_L57Iqw4WSdFhUYkFrMUhsRGFXdUhfUTJydU5JekE">https://docs.google.com/spreadsheet/ccc?key=0Al_L57Iqw4WSdFhUYkFrMUhsRGFXdUhfUTJydU5JekE</a>';</span></div>
</div>
<div>
<br /></div>
<div>
Then, the following functions shows how I got the data from my spreadsheet, complete with a SQL'ish query mechanism, and displayed it. You'll have to modify it for your site, but the approach is pretty straightforward.</div>
<div>
<br /></div>
<div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">function loadNews(limit) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var query = new google.visualization.Query(newsSource);</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>query.setQuery('select D where A=true order by B desc limit ' + limit);</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>numNewsLoaded = limit;</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>query.send(newsQueryResponse);</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">function newsQueryResponse(response) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (response.isError()) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return;</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var dataTable = response.getDataTable();</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>news_data = convertToArray(dataTable);</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>newsLoaded(news_data);</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">function newsLoaded(data) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var str = "<ul>";</ul>
</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for (x in data) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var item = data[x];</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var html = item[NEWS_HTML];</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>str += "
<li>" + html;</li>
</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>str += "</span></div>
</div>
";<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (numNewsLoaded == initNumNews) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>str += "<a href="javascript:;" onclick="loadNews(100);">older news...</a>";</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> </span></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$("#news").html(str);</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">}</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span></div>
<div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">function convertToArray(dataTable) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var numCols = dataTable.getNumberOfColumns();</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> var r,c,arr = [];</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> arr.length = dataTable.getNumberOfRows(); // pre-allocate for speed</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for (r=0; r<datatable .getnumberofrows="" font="" r=""></datatable></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var a = [];</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> a.length = numCols; // pre-allocate for speed</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for (c=0; c<numcols a="" c="" datatable.getvalue="" font="" r=""></numcols></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>arr[r] = a;</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> </span></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return arr;</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">};</span></div>
</div>
<div>
<br /></div>
<div>
Note that Google's new spreadsheets aren't supported yet. You can <a href="https://developers.google.com/chart/interactive/docs/queries">read more</a> about Google's support for these kind of data queries.</div>
<div>
<br /></div>
<div>
Thanks to grad student Adil Yalcin for helping me figure out this trick.</div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-61912191649596054352014-01-20T11:28:00.000-05:002014-01-20T11:28:20.521-05:00Guest Post: Ben Shneiderman on "Her"My colleague, Prof. Ben Shneiderman wrote the following review of the recent movie "<a href="http://www.imdb.com/title/tt1798709/">Her</a>". I post it because it reflects Shneiderman's long-time argument that anthropomorphizing computing systems is neither effective nor appreciated by users. Although "Ask Alex" on www.united.com is an example that has been running for at least 1.5 years so why is it apparently successful there? And while Siri may not be in the news much anymore, Apple hasn't pulled it from iOS either. Time will tell if Shneiderman's prediction that all such anthropomorphic technologies will disappear.<br />
<br />
Shneiderman's observations that "the need for physicality, exclusivity, and full disclosure are central to human relationships"may seem obvious when you read his argument, but it is this clarity of recognition that makes the review valuable. This much longer <a href="http://www.wired.com/design/2014/01/will-influential-ui-design-minority-report/">review in Wired</a> where these issues never take center stage make the point that the "obvious" is only such if you are tuned to what is important.<br />
<br />
---------<br />
<br />
Review of Her (the film)<br />
Ben Shneiderman (1/12/2014)<br />
<br />
This creative, clever film depicts current fantasies about how an OS could have a “real” loving relationship with a person. The emotional empathic tone of Theodore and the charming voice of Samantha make compelling conversation, that seduces Theodore and the audience for a while. But Samantha’s total misreading of human physicality emerges when she sends a surrogate body, which Theodore rejects. When she reveals that she is having 641 simultaneous loving discussions, their relationship hits a brick wall.<br />
<br />
The need for physicality, exclusivity, and full disclosure are central to human relationships, but Samantha’s programmers failed to realize even those basic requirements. Of course, they fail in so many other ways, but the screenwriters cleverly manipulate the audience to go along with the perfect partner fantasy. Scarlett Johansson skillfully says all the right things with delightful empathic intonation, reminding us of our powerful attraction to supportive comments, thoughtful suggestions, vulnerable phrasing, and loving teases.<br />
<br />
The filmmakers are right in reminding us of our growing infatuation with mediated relationships. Real people need real love, not artificial substitutes or technology distractions. So, will audiences turn off their phones and turn on to their partners, family, and friends to express genuine feelings? I hope so.<br />
<br />
This film continues to promote the misguided belief that humans want technological partners and avatar-based machines. Consumer rejection of anthropomorphic technologies has been consistent for the past half century (Tillie the Teller, Postal Buddy, Ken the butler, Clippie, Ananova, etc.) but new generations of designers keep coming up with fresh versions, which will also disappear.<br />
<br />
This future technology portrayal continues the 50-year old Star Trek/Star Wars tradition of using voice communications to let the audience know what is happening, and use emotional tone effectively. However, the future of computing will be more visual than verbal. Voice is important for human relationships, but can’t keep up with the human mind’s desire for information abundance and swift decisions.<br />
<br />
The film also might trigger reflections on the merits of autonomy and interdependence. The mistaken model of autonomous machines has dangers, and the need for human balance between autonomy and interdependence needs modern reinterpretations to fit evolving technology. Human locus of control is an essential design guideline, even as technology sophistication grows.<br />
<br />
Prof. Ben Shneiderman ben@cs.umd.edu<br />
Dept of Computer Science 301-405-2680 <br />
A.V. Williams Building www.cs.umd.edu/~ben<br />
University of Maryland www.cs.umd.edu/hcil<br />
College Park, MD 20742 Twitter: @benbendc Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com2tag:blogger.com,1999:blog-22783006.post-54233597061682905052013-05-20T07:45:00.001-05:002013-05-20T07:45:04.145-05:00Google I/O 2013 Trip Report<span style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">Since a handful of people have asked me about <a href="https://developers.google.com/events/io/">Google I/O</a>, and it isn't a conference that a lot of academics go to, I thought I'd share my experience with this group.</span><br />
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
First off - why did I go? The answer is because I didn't go to CHI so I wasn't worn out, and because Google asked. They offered me a $300 ticket (compared to the normal $900 which is also very hard to get). The primary reason I wanted to go was to experience the silicon valley big company event. I was interested of course to learn about Google's view of modern web technology, but mostly I just wanted to feel what this kind of event was like. (And full disclosure, I have research funding from Google.)</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
So, first let me comment on that feeling. It was pretty much what I expected - and totally surreal. It was VERY well organized with hundreds of Googlers and staff helping everywhere. Academics were treated specially (with a short special line, a special floor at an evening party, an invite to Google's SF offices for a tour, etc.). And it was seriously geeky. I was a distinct minority - caucasian and old. There was very little gray hair and very few women. And a lot of Asians of all kinds. The keynote was a lot like a rock concert. Super crowded - intense spirit. Thousands of people holding up their phones to take pictures of the screens showing fluid blobby animations to rock music before the start. And every one yelling a count down to the start (illustrated on the displays.) I almost laughed at that part - I guess you can tell my age. I enjoyed it, but just couldn't get *that* worked up about it :) The <a href="http://www.youtube.com/watch?feature=player_embedded&v=9pmPa_KxsAM">3 hour keynote</a> (and all the talks) was very well orchestrated and presented. I really enjoyed hearing Larry Page give his talk. Unlike the other highly scripted talks, his was clearly quite heartfelt. He was doing his best to step out of his demanding role and relate to his techy audience, and I think he succeeded. (Of course, cynics could argue that he was just very good at scripting the feeling of non-scriptedness...) He largely talked about the importance of being innovative and doing good - and stop the cat fighting that tech companies do. And then without any warning, he took 30 minutes of questions and there was a pretty interesting discussion - probably my favorite part of the whole conference.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
There was, of course, excellent free food (breakfast and lunch). Free coffee. Free snack area. And a free Chromebook Pixel (retail $1,450) - meaning they gave away something like $10m worth of them. This event was not a money maker! At least not directly. They of course spent 3 days exciting 6,000 developers about using Google tools to help pursue Google's vision. You may have heard that Google is making their interfaces simpler - removing more stuff, predicting more stuff, and using more of your personal data. Some people will no doubt find that very scary and objectionable. But clearly lots of people (including, I admit, me) find it an acceptable trade-off. And their demos were astoundingly good. For any of you that remember Microsoft's <a href="http://www.youtube.com/watch?v=2Y_Jp6PxsSQ">painfully embarrassing voice recognition demos</a> a few years back - Google ACED them. There was 100% recognition rate of live demos of the speaker talking into an actual phone, speaking fairly complex natural language at regular rates in a very noisy room of 6,000 people. And if you remember "<a href="http://www.youtube.com/watch?v=RyBEUyEtxQo" style="color: #1155cc;" target="_blank">Put That There</a>" from 1979, then it was all the more impressive when they had good pronoun connectivity back to previous utterances. Expect to see a lot more voice recognition built into every Google product. (And no more clicking - soon you'll be able to just say "ok google" and start talking when most google products are open.)</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
Glass was a big deal (but hardly mentioned in the keynote). Hundreds of people were wearing them. There was a place to try them out (which I did). And a <a href="https://developers.google.com/events/io/sessions#t-glass">number of talks on Glass</a> (videos available for many of them.) Personally, I find Glass intriguing - but in its current form I think it is unlikely to be used outside of niche areas and geeks (beyond a startup phase). I predict they will be like bluetooth headsets. They will probably be everywhere next year until people realize that it is too annoying to wear something all the time (and charge them, etc) for the infrequent times when the value add over pulling out your phone is worth it (again, except for the geeks and niche uses). OTOH, if the cost was much less (i.e., it was built invisibly into regular glasses, had inductive charging, etc.) then that value calculus could be very different.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
And then there were 2.5 days of talks, which I got somewhat bored of by the second day. Two of the talks I most wanted to see were overfull and I couldn't get in. It was very crowded and difficult to move around between sessions. And many of the others were just too deep about topics I wasn't that interested in (i.e., APIs for every Google product). It would be greatly rich for people building web startups using all of those tools - but academic research tends to be much more selective. And when there is something I actually want to use, it is easy enough to learn it with public resources.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">
So, bottom line, I am glad I went for the overall experience. But I'm not sure that I would recommend it to most academics (especially since most of the <a href="https://developers.google.com/events/io/sessions#-">talks are available online</a>.) But it was fun. And Google probably succeeded in their biggest goal which is that I left feeling more positive about Google than when I arrived.</div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-39518685521661939772013-04-29T11:54:00.004-05:002013-05-02T13:00:46.951-05:00Why Lecture Isn't SufficientIt takes effort to learn. A common adage is that the best way to learn something is to teach it. So, it shouldn't be surprising that simply listening to someone lecture isn't the best way to learn. This is <b>nothing new</b>, but I've been reading more and more that show that alternative "active learning" approaches are demonstrably better. And this works in a wide variety of settings at surprisingly large scale. I've collected here some particularly interesting references (in reverse chronological order):<br />
<br />
Beth Simon, Julian Parris, and Jaime Spacco. 2013. <b>How we teach impacts student learning: peer instruction vs. lecture in CS0</b>. In Proceeding of the 44th ACM technical symposium on Computer science education (SIGCSE '13). ACM, New York, NY, USA, 41-46. <a href="http://doi.acm.org/10.1145/2445196.2445215">http://doi.acm.org/10.1145/2445196.2445215</a><br />
<blockquote class="tr_bq">
=> Replaced lecture with peer instruction (PI) in a non-majors CS0 course (i.e., the one before a traditional freshman majors class) resulted in approximately a half letter grade improvement (N=90). The PI class was assigned reading before class that was assessed with a short quiz at the beginning of each class. Much of the lecture was replaced with a sequence of: 1) individual clicker responses; 2) discussion in assigned groups; and 3) individual clicker responses again; 4) whole-class discussion.</blockquote>
<br />
Leo Porter, Cynthia Bailey Lee, Beth Simon, and Daniel Zingaro. 2011. <b>Peer instruction: do students really learn from peer discussion in computing?</b> In Proceedings of the seventh international workshop on Computing education research (ICER '11). ACM, New York, NY, USA, 45-52. <a href="http://doi.acm.org/10.1145/2016911.2016923">http://doi.acm.org/10.1145/2016911.2016923</a><br />
<blockquote class="tr_bq">
=> Replaced lecture with peer instruction in two upper-division majors courses (Intro to Computer Architecture, N=51; and Intro to Theory of Computation, N=45). PI implemented similarly as first paper (above). Findings that 85-89% of "potential learners" benefit from peer discussion. 90% of students broadly agree that "I recommend that other instructors use our approach ... in their courses."</blockquote>
<br />
Louis Deslauriers, Ellen Schelew, and Carl Wieman. 2011 <b>Improved Learning in a Large-Enrollment Physics Class</b>. In Science 13 May 2011, 332 (6031), pp. 862-864. <a href="http://www.sciencemag.org/content/332/6031/862.short">http://www.sciencemag.org/content/332/6031/862.short</a><br />
<blockquote class="tr_bq">
=> In two Quantum Mechanics physics courses (N=~270 each), flipping one week of the course (replacing lecture with a variety of active learning activities) resulted in increased student attendance, higher engagement, and improvement in learning from average test scores of 41 to 74. The active learning classes included "pre-class reading assignments, pre-class reading quizzes, in-class clicker questions with student-student discussion, small-group active learning tasks, and targeted in-class instructor feedback. ... The small-group tasks were questions that required a written response. Students worked in the same groups but submitted individual answers at the end of each class for participation credit."</blockquote>
<br />
Jason A. Day and James D. Foley. 2006 <b>Evaluating a Web Lecture Intervention in a Human-Computer Interaction Course</b>. In IEEE Transactions on Education, Vol. 49, No. 4, 420-431. <a href="http://ieeexplore.ieee.org/xpls/abs_all.jsp?arnumber=4012664">http://ieeexplore.ieee.org/xpls/abs_all.jsp?arnumber=4012664</a><br />
<blockquote class="tr_bq">
=> Flipping an HCI course resulted in grades that were just about a full letter grade higher in comparison to a control condition. The control reduced the amount of lecture time by the estimated time students watched material outside of class. The lectures were replaced with web-based video lectures including PowerPoint slides and video of the instructor - much like today's MOOCs. Students had short quizzes on the web lectures before class. These "Lecture Homework Assignments" (LHWs) were "synthesis-type questions that require students to discern and elaborate on concepts covered in the lecture" - "not simply verification or summary-type questions". After the LHWs, class time included "project-related group presentations, small breakout group discussions and presentations, redesign sessions, design critiques, design reviews with HCI experts, role-playing activities, discussions with local HCI practitioners, and others."</blockquote>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-61895098996221055302013-04-17T06:49:00.000-05:002013-04-17T06:49:46.626-05:00Special Advisor to the Provost on Technology and Educational Transformation<br />
I'm excited to announce the new role I've just taken on at UMD. Here is the letter I just sent to our faculty describing it. I've already received about 2 dozen thoughtful replies, and am really looking forward to meeting the people innovating on campus!<br />
<br />
Dear Colleagues,<br />
<br />
It shouldn't be a surprise that our campus is looking closely at the use of technology in education, and our faculty are actively experimenting with different approaches. Recently, there has been a confluence of pedagogical interest and technological advancement, which has made the application of technology to education a strategic interest at UMD and at universities around the world. There are <a href="http://fia.umd.edu/events/moocs/">MOOCs</a> (such as <a href="https://www.coursera.org/">Coursera</a>, <a href="https://www.udacity.com/">Udacity</a> and <a href="https://www.edx.org/">EdX</a>), online classes, and any number of hybrid approaches. "Blended" educational environments combine face-to-face and electronic classrooms, and "<a href="http://net.educause.edu/ir/library/pdf/eli7081.pdf">flipping</a>" the classroom (lectures online and face-to-face classes for more active, engaged learning) are just some of the strategies that instructors are pursuing.<br />
<br />
The opportunities (and risks) here are significant enough that the Provost has asked me to help her develop a strategy to best infuse technology into education throughout campus. Thus, starting immediately, I will be taking on the role of <b>Special Advisor to the Provost on Technology and Educational Transformation,</b> through August 2014. I hope to consider a wide range of activities while keeping the focus on our core mission of improving the quality of the education we offer to our students on campus. But it goes further than that. The opportunities for innovation, study, and publishable research in this space are tremendous. And the Provost has made it clear that pursuing research-based understanding of these issues is crucial.<br />
<br />
As a computer scientist working in the area of Human-Computer Interaction, I have been involved in developing and applying technology to support education. From the <a href="http://en.childrenslibrary.org/">International Children's Digital Library</a> to <a href="http://www.cs.umd.edu/localphp/hcil/tech-reports-search.php?number=2012-21">SearchParty</a>, I have endeavored to create new ways that technology can be used to motivate students and increase their power to learn.<br />
<br />
As the campus considers these issues more broadly, I welcome your perspective. If you have exciting new ideas, or concerns about technology in education, let me know. As I said, the opportunities are tremendous - but it is up to us to invent the future.<br />
<br />
Looking forward to working with you,<br />
<br />
- BenBenhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-88919167042065926512012-12-13T15:01:00.000-05:002014-05-15T08:35:37.870-05:00Word for Mac 2011 Keyboard Navigation ShortcutsOne of my favorite not-well-known features of Mac is that standard emacs CTRL keyboard shortcuts are available system wide to move the cursor and do basic editing WITHOUT moving ones hands from the home position. This is incredibly valuable to touch typists (such as myself). This works in all Apple products (TextEdit, Terminal, Pages, Web browsers, etc.)<br />
<br />
But it doesn't work in Microsoft Word for Mac. Fortunately, Word for Mac offers a built-in tool for customizing the keyboard that easily lets you add this feature back in. Just follow this simple recipe:<br />
<br />
<br />
<div class="p1">
Select the menu <span style="background-color: #fff2cc;">Tools->Customize Keyboard…</span></div>
<div class="p2">
<br /></div>
<div class="p1">
In Categories, select <span style="background-color: #fff2cc;">All Commands</span></div>
<div class="p1">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="p1">
Then for each of the following, click in <span style="background-color: #fff2cc;">Press new keyboard shortcut</span> and enter the keyboard shortcut, and select the command from the "Commands" window and press Assign.</div>
<div class="p2">
<br /></div>
<div class="p1">
Ctrl-a StartOfLine</div>
<div class="p1">
Ctrl-e EndOfLine</div>
<div class="p1">
Ctrl-b CharLeft</div>
<div class="p1">
Ctrl-f CharRight</div>
<div class="p1">
Ctrl-p LineUp</div>
<div class="p1">
Ctrl-n LineDown</div>
<div class="p1">
Ctrl-d EditClear<br />
Cmd-= ViewZoomIn<br />
Cmd-- ViewZoomOut</div>
<div class="p1">
<br /></div>
<div class="p1">
This is what it looks like after I mapped the first key:</div>
<div class="p1">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExhGHBxsst-ohZdyyxgT2pNzHz1nzbBMKhSbi11ntYl4s9F8bT9oNCbpP4cUWYtDd8XACgeCMySe37G3RxbI3dJeu7ozFXjcxrjy_YnpvQPd034SYPVbX9eT2c6ljP4irQ9Cw9g/s1600/word-keyboard-customization.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExhGHBxsst-ohZdyyxgT2pNzHz1nzbBMKhSbi11ntYl4s9F8bT9oNCbpP4cUWYtDd8XACgeCMySe37G3RxbI3dJeu7ozFXjcxrjy_YnpvQPd034SYPVbX9eT2c6ljP4irQ9Cw9g/s400/word-keyboard-customization.png" height="293" width="400" /></a></div>
<div class="p1">
<br /></div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-50700850645712864172012-09-09T18:00:00.000-05:002012-09-09T18:24:36.772-05:00Visualization of All My Publications<div class="separator" style="clear: both; text-align: left;">
I rebuilt my home page, including a <a href="http://www.cs.umd.edu/~bederson/papers/index.html">dynamic visualization</a> that shows an overview and allows selection of all my publications going back 20 years. I used <a href="http://d3js.org/">D3</a>, which is a <i>fantastic</i> Javascript visualization library - built on SVG, which is supported in all modern browsers.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.cs.umd.edu/~bederson/papers/index.html"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTLKYTWovus5a3khXddBIzUGxqT0eGLmwpgpJUljz5iTPhB9GuZIZRe4HPekA0AdcdV_yTjBsHoOK9Pu-d98ksnRH17mWj_6aMb019aBhCYMrKLE7P7bV9_c5QQynVv_JIME1Rw/s400/pubs.png" width="400" /></a></div>
<br />
The key idea of the visualization is to provide a rich, interactive overview that gives clear access to my life's publications without requiring any training. In order to reach this goal, I simplified - offering only the essential features that lets people filter based on the three fundamental characteristics:<br />
<br />
<ul>
<li>People - my co-authors</li>
<li>Time - when I published</li>
<li>Publications - what I published, including hand-picked keywords</li>
</ul>
<div>
I chose a <a href="http://mbostock.github.com/d3/ex/bubble.html">bubble plot</a> for my co-authors that displays people larger depending on the number of papers I co-authored with them. People are colored based on their basic category (Faculty, Student, Industry or Researcher). People's names are truncated (and sized) depending on available space - but show the full name (and number of co-authored publications) as a tooltip.</div>
<div>
<br /></div>
<div>
All visual elements are selectable and filter based on the thing that was clicked (person, person type, category - and even individual papers, represented by orange dots in the timeline). It is also possible to perform meta data text search. To support all of this interaction without making it overly complex, I chose a simplistic design that doesn't support history or queries any more complex than simple conjunctions. To start over, press the "Reset" button.</div>
<div>
<br /></div>
<div>
The implementation is entirely custom. I built a Python/Django back end with a custom database that enables me to have entities for each author (avoiding typos, different names, etc.), venue and even keyword. Plus, there is an administrative interface for updating content, so I don't have to muck with HTML and ftp anymore on a day to day basis. The database goes further to support the main page as well with news and project updates.</div>
<div>
<br /></div>
<div>
The visualization uses the standard D3 bubble plot and a custom timeline. The timeline includes range sliders on top to enable filtering of dates as well as keywords. Each publication is represented by an orange dot. Clicking on a dot shows the first page of the paper (created using <a href="http://imagemagick.org/script/index.php">imagemagick</a>) to extract the image of the page from the .pdf file. I've also made PDFs all papers directly accessible.</div>
<div>
<br /></div>
<div>
All the code is open source with a BSD license. Although I didn't bother to publish it on a public repository because it is somewhat complicated to deploy a Django app. So instead, simply look at the HTML source and follow the javascript links. For example, the primary D3 visualization code is available here: <a href="http://www.cs.umd.edu/~bederson/js/vis.js">http://www.cs.umd.edu/~bederson/js/vis.js</a></div>
<div>
<br /></div>
<div>
Also, there is a simple API that you can use to access the database in a RESTful format should you want to access my publications for some reason.</div>
<div>
<br /></div>
<div>
Publications: <a href="http://hcil2.cs.umd.edu/bederson/pubs/pubs/pubs/">http://hcil2.cs.umd.edu/bederson/pubs/pubs/pubs/</a></div>
<div>
Authors: <a href="http://hcil2.cs.umd.edu/bederson/pubs/pubs/authors/">http://hcil2.cs.umd.edu/bederson/pubs/pubs/authors/</a></div>
<div>
Venues: <a href="http://hcil2.cs.umd.edu/bederson/pubs/pubs/venues/">http://hcil2.cs.umd.edu/bederson/pubs/pubs/venues/</a></div>
<div>
Keywords: <a href="http://hcil2.cs.umd.edu/bederson/pubs/pubs/keywords/">http://hcil2.cs.umd.edu/bederson/pubs/pubs/keywords/</a></div>
Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com4tag:blogger.com,1999:blog-22783006.post-80465177790203229882012-06-12T15:39:00.000-05:002012-06-12T15:46:51.422-05:00Interactive D3 ExperimentsWith my first week of sabbatical completed, I dug into interactive graphical web programming - which turned into a deep dive into <a href="http://d3js.org/">D3</a>, <a href="http://www.w3.org/Graphics/SVG/">SVG</a>, and JavaScript DOM and events. Go ahead and try my experiment:<br />
<br />
<iframe frameborder="0" height="525" src="http://www.cs.umd.edu/~bederson/blog/d3-test-6-12-2012/d3%20test.html" width="550"></iframe>
<br />
<div style="text-align: right;">
<a href="http://www.cs.umd.edu/~bederson/blog/d3-test-6-12-2012/d3%20test.js"><span style="font-size: x-small;">Source</span></a></div>
<br />
I don't know if I should be proud that I accomplished something, or horrified at how long it took and how complex modern interactive web programming is today (or perhaps how atrophied my programming brain has become). In any case, I wanted 100% control over the interaction, and I finally got what I wanted - but it was hard. I could have done this in Java or in iOS much, much, much faster (well, at least if I had a graph layout algorithm handy).<br />
<br />
Anyway, here is a high-level summary of what I learned:<br />
<ul>
<li><b>Interactive Graphics Layer:</b> HTML5 "canvas" v. "svg". First exploration was to analyze canvas (pixel-based write-only renderer) v. SVG (DOM-based, animatable, eventable vector graphics). SVG is much closer to my beloved <a href="http://www.cs.umd.edu/hcil/pad++/">Pad++</a> & <a href="http://piccolo2d.org/">Piccolo</a> days of yore - and scalable and interactive is what I need. So, SVG it is.</li>
<li><b>JavaScript SVG Wrapper:</b> SVG is ugly, and not meant for humans to write. So, I went looking for a library. I found 3:</li>
<ul>
<li><a href="http://d3js.org/">D3</a>: Advanced. Written by the brilliant and experienced Mike Bostock. High level, focused on data bound visualizations. A slight impedance mismatch for what I am looking for - but in the end, the clear winner (more below)</li>
<li><a href="http://raphaeljs.com/">Raphael</a>: Low-level and multi-platform compatible. Meaning it supports the least common denominator of features across all browsers (including IE's VML). This means no groups and no classes. No groups means it is very difficult to hang data off a collection of items in the DOM - and so you are obligated to create a shadow data structure in the app. No classes means no easy styling, and no generic event handlers.</li>
<li><a href="http://keith-wood.name/svg.html">JQuery SVG Plugin</a>: This is actually about the feature set I was initially looking for, but the tool just isn't sophisticated enough. The architecture isn't clean enough, the docs and examples aren't sufficient, and I didn't have confidence that this project has legs. Close though - and with some TLC, it could become great.</li>
</ul>
<li><b>D3:</b> D3 is well known to have a high learning curve - and it does. There are a handful of issues, some of which could definitely be helped by more documentation. It took me about a solid week to really feel comfortable with it - although admittedly that included brushing up on my JavaScript and DOM knowledge. However, I bet I'm not that atypical here. Anyway, here are a few issues I ran into:</li>
<ul>
<li>The basic data binding model (w/ "enter" and "exit" mechanisms for more and fewer bound data items) just takes a while to wrap your head around. The docs here are good - just new to me.</li>
<li>The relationship between D3 selection and underlying objects took a while to get a handle on. When you get a selection, are those DOM objects, and if not, what are they? This should be spelled out really clearly in the docs.</li>
<li>Guidance on use with JQuery. Turns out this wasn't hard, but I (like just about everyone I know) rely on JQuery - so what are the catches? When is it a good idea to use D3 v. JQuery binding? Are they interchangable? Can you even use JQuery to select SVG DOM elements? A section on this in the docs would be really helpful.</li>
<li>Events bound to selections are *statically* bound. This is the same as JQuery, and I should have known better - but it really threw me for a loop. This means that when you bind an event to a class name, and then change the class name - the event handler doesn't get unbound. You have to manually unbind and then bind new event handlers.</li>
<li>Knowing what is a DOM attribute and what is a CSS style is confusing. A summary table of supported SVG objects, attributes and styles would be really helpful.</li>
<li>I kept on wanting to write event handlers that worked on only some elements of a selection, but couldn't figure out how. For example, I would have a bunch of active nodes, and want to act on all of them except the one the mouse was over. With 20 years of iterative programming in my brain, I spent an inordinate amount of time before I realized that in this new world of selection-based programming, the right approach was to change "class" tags on the elements so just the things I wanted had the right class names - and then select on that class.</li>
<li>Finally, the D3 API docs are pretty good, but badly need complete examples. Many have no examples, and hunting through the demos to see how something is actually used is very time consuming. And where there are examples, they are usually abstracted. That is fine for conceptual understanding, but I kept wishing they were linked to full, simple standalone examples. For example, I spent 3 hours getting the syntax of a path right - and then figured out later I could have just created a line. Sigh...</li>
</ul>
</ul>
<div>
Well, there's more - but that's a start. Modern web graphics technology is amazing. I'm heading out of the country for a few weeks, but when I return, I expect to be able to start building cool stuff!</div>Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com2tag:blogger.com,1999:blog-22783006.post-90348009268407905462011-04-19T07:57:00.001-05:002011-04-19T07:57:20.167-05:00How to merge different Google Docs accountsI regularly get requests from people I share Google Docs with to re-share with a different account. That is, I know their primary university email address, so I share with that, and then I get an email asking to share with their gmail account. It turns out that a largely hidden, but very useful feature exists that makes it possible to link multiple email addresses to a single Google Docs account so that which ever of those email addresses a doc is shared with, you will have access to it through your single primary account.<br /><br />For example, my google acct id is @gmail.com, but I want docs shared with @cs.umd.edu to also be available there (rather than having 2 or more google docs silos). This does not affect your email or anything else - but rather is just a way to consolidate docs.<br /><br />To set this up, log into google at <a href="http://docs.google.com/">http://docs.google.com</a> (or <a href="http://www.google.com/">google.com</a>, etc.) and select Account Settings:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIkmU2M4oMWJPvHShpP_lj8yRF2AZJ4lY5TadAljKaZBL3tM-g9PCilxM9wFTDpAjhBgR-0KJ2VYoxOrE9aWatS4oBziogknFXn8Pz5ZvuYtoZqtf9YibuzHI-scFnGxF8e3R_vA/s1600/Screen+shot+2011-04-19+at+8.13.45+AM.png"><img style="margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 191px; height: 257px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIkmU2M4oMWJPvHShpP_lj8yRF2AZJ4lY5TadAljKaZBL3tM-g9PCilxM9wFTDpAjhBgR-0KJ2VYoxOrE9aWatS4oBziogknFXn8Pz5ZvuYtoZqtf9YibuzHI-scFnGxF8e3R_vA/s400/Screen+shot+2011-04-19+at+8.13.45+AM.png" alt="" id="BLOGGER_PHOTO_ID_5597276652063123570" border="0" /></a><br /><my name=""><my name=""><br />Then, add an email address by clicking on Edit under Personal Settings.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqWIZ68eUFHxgIsItcMjxZaoLGxDKmukYN2gz1WKJREBces_lTHpo34iumJU-sSihyphenhyphennAwtDtqkP4u1K3VN1T4tBmdIncyUujLjS-iMWTuxHAXC25fs5lSH679ygf9X23F02VGpA/s1600/Screen+shot+2011-04-19+at+8.14.49+AM.png"><img style="cursor:pointer; cursor:hand;width: 400px; height: 189px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqWIZ68eUFHxgIsItcMjxZaoLGxDKmukYN2gz1WKJREBces_lTHpo34iumJU-sSihyphenhyphennAwtDtqkP4u1K3VN1T4tBmdIncyUujLjS-iMWTuxHAXC25fs5lSH679ygf9X23F02VGpA/s400/Screen+shot+2011-04-19+at+8.14.49+AM.png" alt="" id="BLOGGER_PHOTO_ID_5597277148824484210" border="0" /></a><br /><br />This will affect all new documents shared with you. If you have existing docs that you want to make available with your gmail account, you can:<br /></my></my><ul><li><my name=""><my name="">Login with your other account and share it with your gmail account</my></my></li><li><my name=""><my name="">Ask the person that originally shared the doc to re-share it with your gmail account</my></my></li></ul><my name=""><my name="">If you find your self with multiple google docs accounts that you want to merge (because people had shared docs with a university account), then you should:<br /></my></my><ul><li><my name=""><my name="">Save all docs from your extra accounts that you want (by exporting or sharing with your gmail acct)</my></my></li><li><my name=""><my name="">Delete that account</my></my></li><li><my name=""><my name="">Go through the process above associating that email address with your gmail acct.</my></my></li></ul><my name=""><my name="">Hopefully that is more helpful than confusing...</my></my>Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com1tag:blogger.com,1999:blog-22783006.post-89270635310272294402010-09-07T12:16:00.003-05:002010-09-07T12:36:43.175-05:00QuicKeys - fix bugs, speed things upAfter, literally, <a href="http://hci-user-advocate.blogspot.com/2009/01/why-is-apple-finder-file-management-so.html">years</a> of griping about various annoyances of my beloved Mac, I finally found a way work around for many of them.<br /><br /><a href="http://startly.com/"><span style="font-weight: bold;">QuicKeys</span></a> is one of the oldest end-user customization tools (for PC and Mac). I've known about it for years, but finally started to put it to use because I was just so annoyed by a few minor things that I kept running into over and over again. Here are a few of the (admittedly minor) Mac annoyances that are now fixed!<br /><br /><span style="font-weight: bold;">iCal:</span> Pressing Shift-Command-T brings up a dialog to go to another date. But there is a bug that makes it impossible to use the keyboard to either activate the dialog (to actually go the date you've specified) or dismiss the dialog. I wrote two simple shortcuts so that pressing return activates the dialog and pressing escape dismisses it. Shame on Apple for making me do this after years of iCal's existence, but anyway now I can use iCal without cursing Apple 5 times a day.<br /><br /><span style="font-weight: bold;">iPhone Simulator:</span> When debugging code with XCode, you press Shift-Command-Return to stop the process. But if the focus happens to be on iPhone Simulator (as it often is when debugging an iPhone app), you have to press Shift-Command-H to stop the process. This is typical Apple keyboard shortcuts. Each one makes some sense on its own, but they don't work together (on iPhone, you pressing the "Home" button, thus the "H"). So I added a shortcut for iPhone so that Shift-Command-Return generates a Shift-Command-H to stop the process. Problem solved.<br /><br /><a style="font-weight: bold;" href="http://www.hogbaysoftware.com/products/writeroom">WriteRoom</a><span style="font-weight: bold;">:</span> The control-A and control-E keys move the cursor to the beginning and end of the paragraph instead of the line, which they do in most other apps. I remapped them.<br /><br /><span style="font-weight: bold;">Mail:</span> Having to use the cursor keys and delete key is adequate, but I do *SO MUCH* cursoring and deleting that moving hands off the home keys turns out to be a significant burden. So, I made Control-N & Control-P move to next and previous emails and Control-D delete the current message. Ahhhh.<br /><br /><span style="font-weight: bold;">Firefox/Instapaper:</span> I like to use <a href="http://www.instapaper.com/">Instapaper</a> to read things offline later. The normal way to do this is to put a bookmarklet in your bookmark bar on the top of your browser. But I hate extra bars - especially on my laptop. So I started by making a shortcut to hide/show the bookmark bar so at least I don't have to dig around in the menu for it. Of course, then I realized I should just make a key to run Instapaper (which I'll do as soon as I finish this post).<br /><br /><span style="font-weight: bold;">Finder/Terminal: </span>I regularly want to use Terminal to look at the contents of a directory I am looking at in finder. You can copy a directory from Finder, open Terminal, type "cd ", paste the directory, ... to get there. Instead, I made a single key that does that.<br /><br />You get the picture. If there is a slow and consistent activity that you do frequently, it takes about 1 minute to write a quickeys shortcut. They can be applied narrowly so they only work for the app in question - and only when, say, a certain dialog is open. So they don't hurt anything else. I haven't observed it slowing down the system. The only issue is that you have to remember the new shortcut. But if the task you are speeding up really is one that you do frequently, then it isn't a problem. If you don't do it frequently, then don't bother speeding it up.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-1880796282019692332010-07-23T11:24:00.002-05:002010-07-23T11:27:45.257-05:00New Windows laptop rantFrom a very experience friend of mine who knows Windows and Mac very well, has worked at Microsoft as a software engineer for several years. He prefers to remain anonymous. Sadly, my experience is about the same, and I am very happy living on a Mac (sometimes using windows in a VM, and sometimes not):<br /><br />-----------<br />[Company] bought me an HP Envy 17 windows laptop because I realized that I couldn't take my primary windows development machine (a mac pro) to meetings and demos. It was only $1200, so I figured it was worth it.<br /><br />The specs were nice -- slightly slower core i7 than I have in my MBP, but 6gb ram built in and a 1920x1080 display. All the reviews I read basically said this was the closest you can get in build quality to a mac without buying something from Apple. A similar MBP 17 starts at $2k.<br /><br />Holy crap, this thing blows. It _looks_ like a Mac, except it's made of plastic and flexes dangerously when held in one hand. They've shamelessly ripped off the apple packaging experience, except forgot the little things (like having the battery be pre-charged so you can use your computer right away, or designing a power brick that (a) doesn't look and weigh as much as a real brick and (b) plugs into the computer on the right side via a hard plastic connector that sticks out 2-3 inches from the machine and looks terrible).<br /><br />Then you boot Windows.<br /><br />The first time through, you get a bunch of HP popups that are a ripoff of the Apple FTUE, except the design is atrocious and in fact the screens don't really match from one to the next. Fine. You get through that, and 14 -- yes 14 -- different preinstalled crapware apps want to update themselves. I have the entire Corel suite on this machine.<br /><br />You can't connect to an 802.1x wireless network via the HP Wireless network utility. This may be a limitation of the windows home premium that ships on this laptop, but the result is I have no in-office wireless. Fine. I plug in an ethernet cord, BUT THE ETHERNET DOES NOT WORK. It turns out that you need to get a Windows wizard to run that lets you choose if your new connection is a Home, Work, or Public network. I manage to get the wizard to run by Disabling the ethernet port and then Enabling it. I assume at this point that most people would have called HP by now.<br /><br />I go into the control panel and change the name of the computer on the network, since 'pc-8994892x' wasn't something I could remember. Once I actually find the correct place in the Control Panel for this (don't get me started on the control panel having grown to nearly 100 applets in win 7), the machine wants to reboot. Fine, it's 2010, and Win7 has a brand new networking stack that was developed from the ground up for Vista, but we still haven't solved the problem of changing the hostname requiring a reboot.<br /><br />So the machine reboots. The SECOND TIME USER EXPERIENCE is that the user DOES NOT BOOT WINDOWS. You boot some kind of crazy HP overlay OS that lets you browse the web or read email, I assume through some kind of Linux-based layer that "boots faster" (not really). I have to dig around to turn this thing off.<br /><br />I am now convinced that the "Apple Tax" is incredibly worth paying for all computers, even if you intend only to run Windows. At least then you get a Windows without all the crapware.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-75601750937091056212010-02-17T08:24:00.002-05:002010-02-17T08:34:28.293-05:00SIGCHI Social Impact Award for 2010<span style="font-weight: bold;">Ben Bederson and Allison Druin </span><br /><span style="font-weight: bold;">from the University of Maryland are awarded </span><br /><br /><span style="font-size:130%;"><span style="font-weight: bold;">The SIGCHI Social Impact Award for 2010</span><br /></span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/ben-and-allison-small-708629.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 210px; height: 400px;" src="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/ben-and-allison-small-708521.png" alt="" border="0" /></a>ACM SIGCHI identifies and honors leaders and shapers of the field of human-computer interaction with annual SIGCHI Awards. The Social Impact Award honors individuals who promote the application of human-computer interaction research for pressing social needs. This year the award was given to Ben Bederson and Allison Druin of the University of Maryland for their joint work in developing the International Children’s Digital Library and their individual work in developing new methods that give children a voice in the development of new technologies, and for their work on electronic voting systems.<br /><br /><a href="http://www.cs.umd.edu/%7Ebederson/">Ben Bederson</a> is Associate Professor of Computer Science at the University of Maryland and past Director of the Human-Computer Interaction Laboratory. With his collaborator, Prof. Allison Druin, he led the development of many of the key technologies designed for and by kids, including KidPad and StoryKit for iPhone. He is the Technical Project Director for the International Children's Digital Library, a multilingual free digital library of children's books, currently consisting of over 4,000 books in over 50 languages, with more than three million users from over 160 countries worldwide. He led the library's collaboration with the Government of Mongolia -- bringing access to the library in rural Mongolia. Prof. Bederson also did influential studies of the usability of electronic voting systems, which resulted in scholarly publications, reports aimed at policy makers, and books directed to the general public. This work has served to highlight the challenges in developing usable electronic voting systems and has informed decisions on voting technology adoption.<br /><br /><a href="http://www.umiacs.umd.edu/%7Eallisond/">Allison Druin</a> is Associate Professor in the College of Information Studies at the University of Maryland and Director of the Human-Computer Interaction Lab. Prof. Druin is a pioneer in the development of technology for children and the inclusion of children as partners in the design process. Her technology co-design methods have been reported on through scholarly publications, presentations, and books, and have become widely used throughout the CHI community. She founded the CHIKids program for the CHI Conference. This program enabled many CHI community members who were parents to participate in the conference while their children learned about CHI and contributed to the experience of the conference, e.g., by producing daily newsletters, websites, and plenary session videos. With her collaborator, Prof. Ben Bederson, she created the International Children's Digital Library, a multilingual free digital library of children's books, currently consisting of over 4,000 books in over 50 languages, with more than three million users from over 160 countries worldwide.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com4tag:blogger.com,1999:blog-22783006.post-86246823803883286982010-02-04T08:27:00.002-05:002010-02-04T08:40:39.634-05:00Another problem with Flash - keyboard focusI consider Adobe Flash to be a virus and have been thrilled that Apple continues to fight against it. The reason I dislike Flash so much is because it breaks fundamental user experience standards, such as:<br /><ul><li><span style="font-weight: bold;">Consistency:</span> The same action should do the same thing in different places. Example: if pressing the down arrow scrolls the web page, then it should always scroll the web page.<br /></li><li><span style="font-weight: bold;">Modes:</span> Modes are almost always bad - but when you have to have them, make them clearly visible. I.e., the user should know what mode they are in by looking at the screen. Example: if typing enters text in a specific text box, then that text box should be clearly highlighted so the user knows which textbox will get their text.</li></ul>My problem with Flash is that it breaks these basic design standards. In order to use a Flash plugin in your web browser (like when you watch most videos), you have to click on the video - and Flash then takes complete control over the keyboard (i.e., it takes your "keyboard focus"). This is bad because you can then no longer use your keyboard to do other browser things - such as scroll with the PageUp and PageDown keys, press Ctrl-T to open a new tab, or Alt-LeftArrow to go back to the previous page.<br /><br />The fact that Flash breaks standard web behaviors is bad enough - but it is even worse because it does so completely invisibly. I get used to using my keyboard to control my web browser because - um, I am a human and I am using my computer. So, sometimes it stops working for no apparent reason. There is no way to see this problem, and the only solution is to use your mouse to click on some non-Flash component in your browser. I bet most people just think that web browers are sucky and inconsistent. The real problem is that Web plugins for common activities that take over they keyboard just shouldn't exist.<br /><br />Bravo Apple. Let HTML5 and built-in web standards for common activities take over.<br /><br />2/4/2010Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com5tag:blogger.com,1999:blog-22783006.post-33986359151926234742010-01-21T12:44:00.006-05:002010-01-21T15:27:14.608-05:00Collaboration with New Super MarioI've been playing Mario for a long, long time (i.e., decades). I've been playing it on Wii with my daughters (now 5 and 10) for a year, and until last month, it was always an exercise in patience. Only one person played at a time, and you we spent more time watching than actually playing. Actually, this is how video game playing has been for 30 years.<br /><br />So, while collaborative game playing is not new, and I don't even think there is anything in particular here that is new, I was stunned by just how good Nintendo put it all together with <a href="http://www.mariobroswii.com/">New Super Mario</a>. It isn't just that we are all playing at the same time, but that the designers have put together so many modes of game play in a seamless way that is equally attractive to a 5 year old and a 45 year old. It supports exploration, goals, collecting points, collaboration, and competition equally. But the killer thing is that it supports these 5 modes at the same time in the same interface. There aren't 5 different ways to launch the game. There is one, and you just choose how to play. In fact, at any given moment, we are often playing several modes simultaneously, or dynamically switching between modes, or one person is doing one thing and the others are doing another.<br /><br />Aside from the sheer number of hours we have played (and continue to play), I judge its success based on our volume. The three of us end a game-playing session exhausted, excited, and a bit hoarse - because we have been yelling so much.<br /><br />There are too many details to go into just why this all works so well, but here are a few examples from the 5 modes:<br /><ul><li><span style="font-weight: bold;">Exploration:</span> Wander around, poke at things and see what happens. <br /></li><li><span style="font-weight: bold;">Goal-driven:</span> Complete as many worlds as possible.<br /></li><li><span style="font-weight: bold;">Collecting points:</span> Get as many points, big gold coins, or powers saved up as possible.<br /></li><li><span style="font-weight: bold;">Collaboration:</span> Bounce on each others head to bounce higher, do a super ground pound (a synchronous maneuver), or wait for someone to finish before moving forward.<br /></li><li><span style="font-weight: bold;">Competition:</span> Push each other off the edge, grab a power rather than share it.</li></ul>They also nailed the screen sharing issue. The essential problem in collaborative games is that everyone looks at the same screen. The traditional solution is a split screen - where one player sees where they are in the world on one side of the screen and the other players sees something else. This isn't really collaboration - this is competitive, simultaneous separate play.<br /><br />New Super Mario, on the other hand, places everyone (up to 4 characters) in a single world. You all move and bounce around in the same space. If the characters wander apart from each other, the world automatically zooms out so everyone is still visible - up to a point. There is a maximum zoom out level after which the lead player (right-most player since this is a left-right side scrolling game) implicitly owns the visible area. The last player (left-most character) gets dragged along. If they get dragged into a hole or something else bad, they die.<br /><br />Actually, they don't die - when someone does something that would normally result in dying, they go in a bubble (i.e. "ahhhh - daddy, I'm in a bubble"). After a few seconds the character floats around the screen in a bubble and they can be revived by one of the other characters bumping into them - up to 5 lives, after which you really die and you have to wait for everyone to die (or bubble), at which point that world starts over. Again, a combination of approaches that brilliantly encourages collaboration without requiring it.<br /><br />There is a lot of verbal communication going on to support all of these modes - which is part of the reason it is so fun. I'm looking forward to finishing dinner tonight just so we can go play. I haven't heard enjoyed a game this much since Asteroids in 1980 - when we played one at a time, but the social element was in going to a gaming parlor.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/NewSuperMarioBros-797236.jpg"><img style="cursor: pointer; width: 400px; height: 250px;" src="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/NewSuperMarioBros-797234.jpg" alt="" border="0" /></a><br /><br />1/21/2010Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-17649773656370316092010-01-18T09:43:00.007-05:002010-01-19T10:50:30.734-05:00My PIM (Part II)I recently <a href="http://www.cs.umd.edu/%7Ebederson/user-advocate/2010/01/my-personal-information-management.html">posted my approach to managing notes</a> and various bits of my personal information (i.e., Personal Information Management). I had some requests to go a bit deeper, so here's a bit more.<br /><br /><span style="font-weight: bold;">Email</span> The biggest trick about managing personal information is to spend more time on frequent tasks, and less time on infrequent tasks (actually, this is a design guideline for all UI). So, what do I do a lot with email? I read incoming stuff and answer it. What do I do infrequently? I search for old email. Simple, but true analysis. So, rule #1: don't spend time filing email. Yes, it must be findable somehow, but it doesn't have to be easy to find. It has to be fast to get rid of so you can go on to the next thing. GMail figured this out with fast searching and making archiving everything the default. But I find that most Outlook users don't do this - they often still laboriously file individual emails into specific folders just in case they want to find it later. What a waste of time! Outlook has fast searching too. So, here's the trick:<br /><br />Turn off auto-archiving, and then just press the delete key. I store everything in the Deleted Items folders. Then, once a year, I dump it all into a .pst (archive) file. That's it. Sure, towards the end of the year, my Deleted Items folder might have 20,000 messages in it, but who cares. I can search in a second or three, and that's good enough. I've been doing this for 10 years, and have 10 .pst files. But guess what, I almost never open up any but the previous year. And when I do, they are around and easy to open and search (as long as I continue to use Outlook, but that's another story).<br /><br /><span style="font-weight: bold;">Files:</span><br />Ok, dumping email into a folder is simple, but that isn't good enough for files - which I actually do manually organize with some attention. Effective hierarchy structures are difficult because research has shown that people don't remember them perfectly. The issue is that the context for storage is often different than the context for retrieval. Thus, there is pretty much guaranteed no perfect solution, but you've got to do something. So, pick something semantically meaningful - and make sure it isn't too big, or you lose stuff. This latter point is key, so let's start there.<br /><br />At each level of my file hierarchy, I only keep relatively active stuff. Then, when a folder starts getting old, I create a sub folder called "zzz Old Stuff" (so it gets sorted at the bottom), and just move things I haven't used recently in there. This way, I never have to throw things out (just in case...), everything stays in it's semantically coherent place, and I only have active things visible at any given time. This, by the way, was my practical solution to an idea I worked on some years ago with Bongshin Lee (called <a href="http://research.microsoft.com/en-us/um/people/bongshin/projects/ff/">Favorite Folders</a>) - but that never went any where as a practical UI.<br /><br />I don't think the actual folder structure I use is likely to be that helpful to others. It is highly idiosyncratic based on my own evaluation of frequency and importance. That being said, here are a few key elements.<br /><ul><li>Ben - personal stuff, distinguished from work</li><li>one directory per major project or collaborator. For some big ones, this becomes the root of a multi-level hierarchy</li><li>Dissertations</li><li>Papers (brings together final copies of everything I published)</li><li>Other's Papers (becoming less important with digital libraries, but where I store important papers from other people)<br /></li><li>Proposals (separate from the actual work because proposal writing is a different ask, and I regularly need to refer to other proposals when working here)</li><li>Talks (slides, etc. for talks. Again, different than the actual work on a project for the same reason as Proposals)</li><li>Conferences (related to service, organizing, etc.)<br /></li><li>Reviews (where I store reviews of other's papers, etc., so I have an easy place to go back when a revision comes in, etc.)</li></ul><span style="font-weight: bold;">Pictures:</span><br />Managing pictures used to be a nightmare, but as with the lessons above, there are two key things I've learned. They must be fast to store because otherwise I won't do it. Storage must be in a future-proof manner as operating systems and photo management tools just don't stand the test of time. But folder names, hierarchies, and JPEGs do. So here's my simple solution.<br /><br />Create one folder per year, and inside each of those, create one folder per month labeled so they get alphabetically sorted (i.e., "01 - January", "02 - February", etc.) Then drop all pictures by the month they were taken into the right folder (which you can easily do in bulk every month or three). If there is an event with a larger number of pictures that feels like it is worth organizing, then create a subfolder for that event, and give it a meaningful name.<br /><br />Finally, whatever software I am using to look at the photos, I never, ever, ever, use that software's proprietary mechanism to store metadata in the photos. Else, it is pretty much guaranteed to not stand the test of time. Instead, I just put everything in the filename of the photo. So, for the past few years, I've been using Picasa. Rather than storing comments or using tags, I just rename the file (one key). Then, any future search system (including Picasa's) work's great. This doubles as a mechanism for letting me access my photos across all of my computers (synced by Live Sync) without loss of information.<br /><br />This is why I will never, ever use Apple's iPhoto. It is lock-in of the worst kind. It sucks all of your photos in, ignores the originals, and puts all info in a proprietary database that cant' be shared across folders. Completely worthless to me, no matter how nice the interface is.<br /><br /><span style="font-weight: bold;">Meeting Notes, etc.:</span><br />This is the toughest category. I've gone through many iterations from my own <a href="http://www.notelens.com/">NoteLens</a> and other flat systems (such as the <a href="http://notational.net/">Notational Velocity</a> I am now using). But I've found that flat organizational systems just don't scale up for me. And I'm not willing to use my regular file system as it is just too much overhead to find the right place, launch the right app, etc. There are many other tools that people use, but for the past year, I have just been using Microsoft OneNote. I hate it's proprietary file format, but the files do sync across computers fine so I can edit on any of my computers. And the UI can't be beat. It offers a beautiful combination of simple text along with figures, notes, imported docs, and fast global search. Plus, it has a nice two-level hierarchy baked into the UI (see below). I'd be much happier if the data was text-backed and there were other UIs (especially on the Mac!) available to access it, but it works well for me know.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/onenote-753766.png"><img style="cursor: pointer; width: 400px; height: 243px;" src="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/onenote-753763.png" alt="" border="0" /></a><br /><br />1/18/2010Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com2tag:blogger.com,1999:blog-22783006.post-4208698163900907792010-01-13T13:26:00.011-05:002010-01-18T10:23:58.633-05:00My Personal Information Management<span style="font-weight: bold;">Update 1/18/10:</span> This is the first part of a <a href="http://www.cs.umd.edu/%7Ebederson/user-advocate/2010/01/my-pim-part-ii.html">two part</a> post.<br /><br />Organizing one's personal information can be amazingly complicated, especially if you want fast and light weight access to commonly used information, and you access information across devices and operating systems. It is even trickier if you want to future-proof yourself so you can access all of your information in the future as well. I have tried <span style="font-weight: bold;">many</span> solutions including Outlook Notes, OneNote, my own <a href="http://www.notelens.com/">NoteLens</a>, and <a href="http://www.evernote.com/">EverNote</a>. However, I think I have a solution that works for me (based on <a href="http://dougist.com/?p=735">this solution by dougist</a>) - at least for my basic unstructured stuff. And the solution is both simple (relying on the most basic of storage systems - a folder of text files) and complex (relying on multiple syncing services and end-user UIs). Note that even though I still use Windows a fair amount, I run it in a VM on a mac, so this software is all Mac, but of course since the data is all text files, everything is also accessible on the PC side. Here it goes:<br /><ul><li>Everything is stored as individual text files in a single folder. Sure, I lose fancy formatting and images, but I get guaranteed future-proofness, I don't waste time formatting, and it turns out that I don't really need images. And tagging is supported if I wanted to add a bit of structure.<br /></li><li>I use Microsoft's free peer-to-peer <a href="http://sync.live.com/">Live Sync</a> cross-computer cross-operating system syncing solution. I've tried the others (SugarSync is unreliable, and DropBox requires all the synced files to be under one directory - ugh!). Live Sync is fast and reliable. I love it. (Although I got <a href="http://www.cs.umd.edu/%7Ebederson/user-advocate/2009/09/microsoft-disappoints-ignores-live-sync.html">mad at Microsoft</a> when they didn't update it for Snow Leopard for 2 months).<br /></li><li>I use my buddy Jesse Grosjean's free <a href="http://www.hogbaysoftware.com/products/simpletext">SimpleText</a> program to sync the text files to a free Google-based web service that he runs. Note that this has one flaw which is that it sends stuff up to the web whenever there is a change, but only pulls stuff down when you sync manually - so one option I am considering is to use it on one computer, and then use my existing Live Sync solution to sync those files across all my desktops (while I wait for Jesse to add auto sync down from the cloud.<br /></li><li>I use Jesse's <a href="http://www.hogbaysoftware.com/products/writeroom_iphone">WriteRoom for iPhone</a> app ($5) to sync those files to my iPhone and access them there.</li><li>I use Jesse's <a href="http://www.hogbaysoftware.com/products/writeroom">WriteRoom</a> for Mac app ($25) for full screen, distraction-free text editing.<br /></li><li>I use the open source <a href="http://notational.net/">Notational Velocity</a> program on Mac (which is remarkably similar to my earlier NoteLens app)</li><li>I was able to export my notes out of EverNote as HTML, and then used the freely available <a href="http://www.nirsoft.net/utils/htmlastext.html">HTMLAsText</a> (for Windows) to convert to text. (I wanted to like EverNote - it has a great feature list, but in practice, it didn't work for me. The UI was too heavyweight, layout changed between operating systems which was a nightmare, the UI was quite different between operating systems which was annoying, and I didn't like the Windows UI which had a weird scrollbar, and made a vertical list of all the notes rather than a notebox that just displayed a single note).<br /></li></ul><span style="font-weight: bold;">Update 1/15/2010: </span>Some other bits - I use <a href="http://www.xmarks.com/">xmarks</a> to sync my bookmarks and passwords across computers (and VMs). This coupled with Firefox's master password to protect passwords is crucial - it means I no longer have to manually save passwords. Coupled with Firefox's fantastic URL bar with one-click bookmarking, my webpage re-finding is dramatically better (direct comparison to Safari and Chrome upcoming - but firefox definitely wins).<br /><br />I also use Microsoft OneNote for my meeting notes (with the data synced across computers with Live Sync). This makes me uncomfortable because it is Windows only and the data is totally locked in to OneNote. But the UI for note-taking that combines very flexible formatting of notes along with images, embedded files (like PDFs) and ink (when I occasionally use a tablet) make it unmatched - so far.<br /><p align="center"><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/notational-velocity-770680.jpg"><img style="cursor: pointer; width: 371px; height: 400px;" src="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/notational-velocity-770621.jpg" alt="" border="0" /></a><br />Notational Velocity UI<br />(Note: screen capture and annotation with <a href="http://skitch.com/">Skitch</a>)</p><br />1/13/2010Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com6tag:blogger.com,1999:blog-22783006.post-23170350110833497822010-01-13T09:13:00.003-05:002010-01-13T09:27:18.049-05:00Making Information Visualization work<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/fry-healthcare-704058.png"><img style="cursor: pointer; width: 400px; height: 232px;" src="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/fry-healthcare-704051.png" alt="" border="0" /></a><br />Information Visualization is all about helping users develop insight. It isn't enough to show beautiful and amazing pictures - even interactive ones. The key, as with all interfaces, is to think about specifically what tasks a user will be able to perform with the tool. Yet, all too many visualizations fail on this most important and fundamental test.<br /><br />Stephen Few (of Perceptual Edge) wrote a beautiful 10 page report on this issue - critically analyzing a visually <a href="http://www.ge.com/visualization/health_costs/index.html">simple visualization </a>by Ben Fry of healthcare spending (see pie chart above). The key is that it doesn't actually enable you to learn anything. He then goes on to create an interface that actually does enable you to discover all sorts of things. The new interface is not simple. Well, each component is simple, but there are lots of components and it may take a minute to figure them out. But no more than that, and then you discover that it is conceptually simple, and you can actually use it.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/few-healthcare-765113.png"><img style="cursor: pointer; width: 400px; height: 257px;" src="http://www.cs.umd.edu/%7Ebederson/user-advocate/uploaded_images/few-healthcare-765108.png" alt="" border="0" /></a><br /><br />Here are the take-home lessons from the article - but go and <a href="http://www.perceptualedge.com/articles/visual_business_intelligence/information_visualization_and_art.pdf">read it </a>- it is well worth it.<br /><ol><li>2-D position and the lengths of simple objects such as bars encode quantitative values in ways that are easy to perceive; angles and areas do not, and therefore should be used only when you can’t use better means.<br /></li><li>We cannot build a picture in our heads of a pattern that is formed by multiple values (such as the average cost of healthcare for patients of each age from 1 to 79 years old) by looking at one value at a time.<br /></li><li>Lines do a good job of showing the pattern formed by a set of values across a continuous range such as patients’ ages, and do so in a way that allows us to compare patterns when multiple data sets are represented at once (such as one line per disease).<br /></li><li>Multiple graphs shown together are often a better solution than a single graph, especially when several variables are involved.<br /></li><li>Several simultaneous views of the same data set, each showing the data from a different perspective, make it possible to see relationships that can’t be seen from one perspective only or from viewing different perspectives independently.<br /></li><li>The ability to easily fi lter out data that doesn’t concern<br /></li></ol><br /><br />1/13/2010Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-1118485755016119482010-01-06T16:06:00.003-05:002010-01-06T16:24:24.341-05:00Microsoft Live Sync vs. SugarSync (Live Sync wins)I've been a <a href="http://www.cs.umd.edu/~bederson/user-advocate/2007/08/foldershare-in-slow-motion.html">long term advocate of file syncing software</a>. It keeps all of my personal files in sync across my 3 computers (2 desktops and a laptop), even going across operating systems (windows and mac). But over the last few months, I have been doing a shootout between Microsoft Live Sync (free) and SugarSync (pay).<br /><br />I had used, loved and evangelized Live Sync for years - since before it was a Microsoft product (they acquired "FolderShare" from ByteTaxi in 2006, I think). But when Snow Leopard came out for Mac, Sync just didn't work. There was <a href="http://www.cs.umd.edu/~bederson/user-advocate/2009/09/microsoft-disappoints-ignores-live-sync.html">very little response from Microsoft</a> and no ETA for a fix. After waiting a few weeks and growing increasingly desperate, I looked at several other solutions. <br /><br />One popular one is <a href="https://www.dropbox.com/">DropBox</a>, but it has a design showstopper for me. Everything that gets synced has to be in a special folder that gets synced. That isn't the way I work. I want to keep my current file system and choose which subfolders get synced to what, so DropBox was out.<br /><br />The other major competitor is <a href="https://www.sugarsync.com/">SugarSync</a>. It lets me control what and where I sync and it has a nice UI. There is one major annoyance which is that it isn't peer-to-peer (like Live Sync). It syncs to the cloud, so all your files sit on their servers. This adds backup and safety, and lets you sync between computers that aren't on at the same time. But you lose privacy, and you eat up their cloud-based disk space - and you have to pay for that. I pay $5/month for 30 GB. Not too bad, but annoying since I am forced to pay for a feature that I don't even want. But I had no choice, so for the last few months, I've been living with SugarSync.<br /><br />However, that experiment was a failure. I *wanted* to like it, especially since the user experience was quite nice. However, the service was just unreliable. At least a half dozen times over a period of a few months, the synchronization would stop. It would get blocked on some file and I had to go through their technical support to fix it. I'd have to delete some cached files, or they would jiggle something on their server, and in a day or two, we would get it working again. But it kept happening. Sometimes it was a result of me making a configuration change (i.e., reinstalling an operating system), and sometimes it just happened. In addition, when it got into this bad state, it would sometimes replicate files and I would find several versions of a file one machine - ugh.<br /><br />Fortunately, Microsoft came through and after two months, they posted a solid version of Live Sync for Snow Leopard, and I switched back. It is working beautifully. It is free. It is fast (since it doesn't go through the cloud). And I don't have to give my files to someone else's cloud. <br /><br />Go Microsoft. In this battle, you are the clear winner.<br /><br />1/6/2010Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com0tag:blogger.com,1999:blog-22783006.post-67428230488500728252009-11-09T20:08:00.003-05:002009-11-09T20:24:53.357-05:00Droid Responsiveness and ErgonomicsMuch has been made about Verizon's new Droid phone on Google's Android platform, and I agree with the reviews looking at the myriad details. But it seems that not enough has been made about the Droid's responsiveness and ergonomics.<br /><br />Everything about actually holding and using the Droid is just a bit uncomfortable and sluggish. There are many examples, but here are a few that popped out in my first experience (in comparison to a long time with iPhone).<br /><ul><li>To wake up the Droid you have to press the on/off button on the top right. There is no natural grasp that lets you do this. It requires several seconds to regrasp the phone, press the button, and then regrasp again so you can unlock it. Compare with iPhone - press the home button with your thumb with the phone in your natural grasp and then immediately swipe with the same thumb.</li><li>Whenever I press any of the buttons on the side of the Droid (power, volume or camera), the keyboard slides open a bit making it harder to press the buttons you were trying to press.</li><li>The keyboard is oriented over an inch from the right side of the device, so not only do you have to type with your thumbs off center, but you have actually reach with your right thumb - making the much lambasted keyboard even more unpleasant.</li><li>All the graphics are slower, the touch screen is less responsive, and everything is less smooth. Yes, the display is sharper due to the higher resolution screen, but the actual experience of using that display is worse. iPhone is almost magically responsive to a very soft touch. This detail is crucial to people's enfatuation with iPhone. Every single interaction with iPhone is sensually pleasant. Android is, well, just sort of ok.</li></ul>The Droid is a fine device, and if I didn't have an iPhone, I would be happy to have one. But after my first day of playing with it, I don't think there is any chance I'd trade my iPhone for it. On the other hand, Android is catching up fast, so a year from now it might be a pretty close battle.<br /><br />Oh, and Droid turn by turn Navigation really is great. Part of the reason it is so good is because it uses a beautifully rendered perspective map view which I haven't seen the equivalent of on any online map - whether it is iPhone, TomTom, Google Maps or Earth.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com1tag:blogger.com,1999:blog-22783006.post-36689350565235009482009-09-14T09:03:00.003-05:002009-09-14T09:10:35.683-05:00iPhone StoryKit app - kids write stories on phonesChildren writing books on mobile phones? That certainly seems unlikely - so how did we get to the point where actually built an app to support it?<br /><br />A long time ago, my colleagues and I started building the <a href="http://www.childrenslibrary.org">International Children's Digital Library</a> to make a safe and high quality place where kids could go to read books and learn about cultures from around the world.<br /><br />Then, last year we decided to try and support children reading on mobile devices - we made an <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=295441481&mt=8">iPhone app</a> to let kids read picture books from the ICDL.<br /><br />Now we went further and decided to build an app that lets kids <span style="font-weight: bold;">write books</span> on their iPhones (or iPod Touches). Search for "storykit" in the appstore or <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=329374595&mt=8">get it from iTunes</a>. You can take pictures, create drawings, record sounds, and yes of course - write actual words. Then automatically post it to a website and share with your friends.<br /><br />Give it a try - especially with your kids - and let me know how it works.Benhttp://www.blogger.com/profile/02454786440233720457noreply@blogger.com12