Interactive appliances & widgets

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <script type="text/javascript"> var pathInfo = { base: 'https://www.idea.org/blog/wp-content/themes/ideaorg/', css: 'css/', js: 'js/', swf: 'swf/', } </script> <title>Interactive appliances & widgets – IDEA</title> <link rel='dns-prefetch' href='//s.w.org' /> <link rel="alternate" type="application/rss+xml" title="IDEA » Feed" href="https://www.idea.org/blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="IDEA » Comments Feed" href="https://www.idea.org/blog/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="IDEA » Interactive appliances & widgets Comments Feed" href="https://www.idea.org/blog/2006/06/01/interactive-appliances-widgets/feed/" /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"\/\/www.idea.org\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.26"}}; !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])?!1:!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([55358,56760,9792,65039],[55358,56760,8203,9792,65039])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='yarppWidgetCss-css' href='//www.idea.org/blog/wp-content/plugins/yet-another-related-posts-plugin/style/widget.css' type='text/css' media='all' /> <link rel='stylesheet' id='contact-form-7-css' href='//www.idea.org/blog/wp-content/plugins/contact-form-7/includes/css/styles.css' type='text/css' media='all' /> <link rel='stylesheet' id='base-style-css' href='//www.idea.org/blog/wp-content/themes/ideaorg/style.css' type='text/css' media='all' /> <link rel='stylesheet' id='base-theme-css' href='//www.idea.org/blog/wp-content/themes/ideaorg/theme.css' type='text/css' media='all' /> <script type='text/javascript' src='//www.idea.org/blog/wp-includes/js/jquery/jquery.js'></script> <script type='text/javascript' src='//www.idea.org/blog/wp-includes/js/jquery/jquery-migrate.min.js'></script> <link rel='https://api.w.org/' href='https://www.idea.org/blog/wp-json/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.idea.org/blog/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.idea.org/blog/wp-includes/wlwmanifest.xml" /> <link rel='prev' title='Modeling and altering reality' href='https://www.idea.org/blog/2006/06/01/modeling-and-altering-reality/' /> <link rel='next' title='Viewing a sequence' href='https://www.idea.org/blog/2006/06/02/viewing-a-sequence/' /> <link rel="canonical" href="https://www.idea.org/blog/2006/06/01/interactive-appliances-widgets/" /> <link rel='shortlink' href='https://www.idea.org/blog/?p=207' /> <link rel="alternate" type="application/json+oembed" href="https://www.idea.org/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.idea.org%2Fblog%2F2006%2F06%2F01%2Finteractive-appliances-widgets%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://www.idea.org/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.idea.org%2Fblog%2F2006%2F06%2F01%2Finteractive-appliances-widgets%2F&format=xml" /> </head> <body class="inner single single-post postid-207 single-format-standard"> <div id="wrapper" class="js-ajax-holder"> <header id="header"> <div class="container"> <div class="logo"> <a href="https://www.idea.org/blog"><img src="https://www.idea.org/blog/wp-content/themes/ideaorg/images/logo.png" alt="IDEA"></a> </div> <div class="search-block"> <a href="#" class="opener"> <picture>  <source srcset="https://www.idea.org/blog/wp-content/themes/ideaorg/images/small-search.png, https://www.idea.org/blog/wp-content/themes/ideaorg/images/small-search-2x.png 2x" media="(max-width: 767px)"> <source srcset="https://www.idea.org/blog/wp-content/themes/ideaorg/images/search.png, https://www.idea.org/blog/wp-content/themes/ideaorg/images/search-2x.png 2x">  <img src="search.png" alt="search"> </picture> </a> <div class="form-search"> <form action="https://www.idea.org/blog" method="get" class="search js-search-form"> <fieldset> <input id="search" name="s" type="search" placeholder="Type your search..." value=""> <button class="search-btn" type="submit" value=""> <picture>  <source srcset="https://www.idea.org/blog/wp-content/themes/ideaorg/images/small-search.png, https://www.idea.org/blog/wp-content/themes/ideaorg/images/small-search-2x.png 2x" media="(max-width: 767px)"> <source srcset="https://www.idea.org/blog/wp-content/themes/ideaorg/images/search.png, https://www.idea.org/blog/wp-content/themes/ideaorg/images/search-2x.png 2x">  <img src="search.png" alt="search"> </picture> </button> </fieldset> </form> <a class="opener2" href="#">Browse Topics</a> </div> </div> </div> <div class="topics-page"> <div class="container"> <div class="topics-holder"> <a href="#" class="closer"><span></span></a> <div class="widget widget_pages"> <h3>Current page</h3> <ul class="js-ajax-links-holder"> <li class="page_item"><a href="https://www.idea.org/blog/tag/apple/">Apple,</a></li> <li class="page_item"><a href="https://www.idea.org/blog/tag/interactivity-2/">interactivity,</a></li> <li class="page_item"><a href="https://www.idea.org/blog/tag/user-interface/">user interface,</a></li> <li class="page_item"><a href="https://www.idea.org/blog/tag/widget/">widget</a></li> </ul> </div> <div class="widget widget_tag_cloud"> <h3>Other topics</h3> <div class="tagcloud js-ajax-links-holder"> <a href="https://www.idea.org/blog/tag/access/" class="tag-cloud-link tag-link-222 tag-link-position-1" style="font-size: 28.358208955224px;" aria-label="access (21 items)">access</a>, <a href="https://www.idea.org/blog/tag/android/" class="tag-cloud-link tag-link-112 tag-link-position-2" style="font-size: 21.791044776119px;" aria-label="Android (7 items)">Android</a>, <a href="https://www.idea.org/blog/tag/apple/" class="tag-cloud-link tag-link-110 tag-link-position-3" style="font-size: 26.268656716418px;" aria-label="Apple (15 items)">Apple</a>, <a href="https://www.idea.org/blog/tag/apps/" class="tag-cloud-link tag-link-169 tag-link-position-4" style="font-size: 25.970149253731px;" aria-label="apps (14 items)">apps</a>, <a href="https://www.idea.org/blog/tag/art/" class="tag-cloud-link tag-link-107 tag-link-position-5" style="font-size: 23.880597014925px;" aria-label="art (10 items)">art</a>, <a href="https://www.idea.org/blog/tag/audience/" class="tag-cloud-link tag-link-45 tag-link-position-6" style="font-size: 28.358208955224px;" aria-label="Audience (21 items)">Audience</a>, <a href="https://www.idea.org/blog/tag/blog/" class="tag-cloud-link tag-link-87 tag-link-position-7" style="font-size: 23.283582089552px;" aria-label="blog (9 items)">blog</a>, <a href="https://www.idea.org/blog/tag/classroom/" class="tag-cloud-link tag-link-188 tag-link-position-8" style="font-size: 21.791044776119px;" aria-label="classroom (7 items)">classroom</a>, <a href="https://www.idea.org/blog/tag/community/" class="tag-cloud-link tag-link-26 tag-link-position-9" style="font-size: 25.970149253731px;" aria-label="community (14 items)">community</a>, <a href="https://www.idea.org/blog/tag/content-management/" class="tag-cloud-link tag-link-39 tag-link-position-10" style="font-size: 25.522388059701px;" aria-label="content management (13 items)">content management</a>, <a href="https://www.idea.org/blog/tag/costs/" class="tag-cloud-link tag-link-70 tag-link-position-11" style="font-size: 21.044776119403px;" aria-label="costs (6 items)">costs</a>, <a href="https://www.idea.org/blog/tag/culture/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 22.537313432836px;" aria-label="culture (8 items)">culture</a>, <a href="https://www.idea.org/blog/tag/data/" class="tag-cloud-link tag-link-38 tag-link-position-13" style="font-size: 27.164179104478px;" aria-label="Data (17 items)">Data</a>, <a href="https://www.idea.org/blog/tag/dissemination/" class="tag-cloud-link tag-link-134 tag-link-position-14" style="font-size: 25.970149253731px;" aria-label="dissemination (14 items)">dissemination</a>, <a href="https://www.idea.org/blog/tag/e-learning/" class="tag-cloud-link tag-link-81 tag-link-position-15" style="font-size: 22.537313432836px;" aria-label="e-learning (8 items)">e-learning</a>, <a href="https://www.idea.org/blog/tag/education/" class="tag-cloud-link tag-link-192 tag-link-position-16" style="font-size: 26.716417910448px;" aria-label="education (16 items)">education</a>, <a href="https://www.idea.org/blog/tag/evaluation/" class="tag-cloud-link tag-link-135 tag-link-position-17" style="font-size: 26.268656716418px;" aria-label="evaluation (15 items)">evaluation</a>, <a href="https://www.idea.org/blog/tag/exhibits/" class="tag-cloud-link tag-link-53 tag-link-position-18" style="font-size: 24.925373134328px;" aria-label="exhibits (12 items)">exhibits</a>, <a href="https://www.idea.org/blog/tag/experiences/" class="tag-cloud-link tag-link-168 tag-link-position-19" style="font-size: 23.880597014925px;" aria-label="experiences (10 items)">experiences</a>, <a href="https://www.idea.org/blog/tag/facebook/" class="tag-cloud-link tag-link-85 tag-link-position-20" style="font-size: 20px;" aria-label="Facebook (5 items)">Facebook</a>, <a href="https://www.idea.org/blog/tag/finding-information/" class="tag-cloud-link tag-link-21 tag-link-position-21" style="font-size: 20px;" aria-label="finding information (5 items)">finding information</a>, <a href="https://www.idea.org/blog/tag/free/" class="tag-cloud-link tag-link-248 tag-link-position-22" style="font-size: 21.791044776119px;" aria-label="free (7 items)">free</a>, <a href="https://www.idea.org/blog/tag/funding/" class="tag-cloud-link tag-link-149 tag-link-position-23" style="font-size: 21.044776119403px;" aria-label="funding (6 items)">funding</a>, <a href="https://www.idea.org/blog/tag/games/" class="tag-cloud-link tag-link-170 tag-link-position-24" style="font-size: 21.044776119403px;" aria-label="games (6 items)">games</a>, <a href="https://www.idea.org/blog/tag/google/" class="tag-cloud-link tag-link-74 tag-link-position-25" style="font-size: 24.477611940299px;" aria-label="google (11 items)">google</a>, <a href="https://www.idea.org/blog/tag/higher-education/" class="tag-cloud-link tag-link-61 tag-link-position-26" style="font-size: 21.044776119403px;" aria-label="higher education (6 items)">higher education</a>, <a href="https://www.idea.org/blog/tag/history/" class="tag-cloud-link tag-link-154 tag-link-position-27" style="font-size: 22.537313432836px;" aria-label="history (8 items)">history</a>, <a href="https://www.idea.org/blog/tag/interactivity-2/" class="tag-cloud-link tag-link-197 tag-link-position-28" style="font-size: 26.268656716418px;" aria-label="interactivity (15 items)">interactivity</a>, <a href="https://www.idea.org/blog/tag/ios/" class="tag-cloud-link tag-link-113 tag-link-position-29" style="font-size: 21.044776119403px;" aria-label="iOS (6 items)">iOS</a>, <a href="https://www.idea.org/blog/tag/ipad/" class="tag-cloud-link tag-link-108 tag-link-position-30" style="font-size: 22.537313432836px;" aria-label="IPad (8 items)">IPad</a>, <a href="https://www.idea.org/blog/tag/iphone/" class="tag-cloud-link tag-link-123 tag-link-position-31" style="font-size: 21.044776119403px;" aria-label="iPhone (6 items)">iPhone</a>, <a href="https://www.idea.org/blog/tag/learning-2/" class="tag-cloud-link tag-link-191 tag-link-position-32" style="font-size: 24.925373134328px;" aria-label="learning (12 items)">learning</a>, <a href="https://www.idea.org/blog/tag/metrics/" class="tag-cloud-link tag-link-33 tag-link-position-33" style="font-size: 20px;" aria-label="metrics (5 items)">metrics</a>, <a href="https://www.idea.org/blog/tag/mobile/" class="tag-cloud-link tag-link-71 tag-link-position-34" style="font-size: 27.761194029851px;" aria-label="mobile (19 items)">mobile</a>, <a href="https://www.idea.org/blog/tag/museum/" class="tag-cloud-link tag-link-105 tag-link-position-35" style="font-size: 30px;" aria-label="museum (27 items)">museum</a>, <a href="https://www.idea.org/blog/tag/navigation/" class="tag-cloud-link tag-link-22 tag-link-position-36" style="font-size: 20px;" aria-label="navigation (5 items)">navigation</a>, <a href="https://www.idea.org/blog/tag/online-course/" class="tag-cloud-link tag-link-295 tag-link-position-37" style="font-size: 20px;" aria-label="online course (5 items)">online course</a>, <a href="https://www.idea.org/blog/tag/open-access/" class="tag-cloud-link tag-link-177 tag-link-position-38" style="font-size: 21.044776119403px;" aria-label="open access (6 items)">open access</a>, <a href="https://www.idea.org/blog/tag/outreach/" class="tag-cloud-link tag-link-136 tag-link-position-39" style="font-size: 29.253731343284px;" aria-label="outreach (24 items)">outreach</a>, <a href="https://www.idea.org/blog/tag/personalization/" class="tag-cloud-link tag-link-137 tag-link-position-40" style="font-size: 21.044776119403px;" aria-label="personalization (6 items)">personalization</a>, <a href="https://www.idea.org/blog/tag/planning/" class="tag-cloud-link tag-link-139 tag-link-position-41" style="font-size: 24.925373134328px;" aria-label="planning (12 items)">planning</a>, <a href="https://www.idea.org/blog/tag/publishing/" class="tag-cloud-link tag-link-179 tag-link-position-42" style="font-size: 22.537313432836px;" aria-label="publishing (8 items)">publishing</a>, <a href="https://www.idea.org/blog/tag/smartphone/" class="tag-cloud-link tag-link-114 tag-link-position-43" style="font-size: 21.044776119403px;" aria-label="smartphone (6 items)">smartphone</a>, <a href="https://www.idea.org/blog/tag/social-media-2/" class="tag-cloud-link tag-link-51 tag-link-position-44" style="font-size: 26.716417910448px;" aria-label="social media (16 items)">social media</a>, <a href="https://www.idea.org/blog/tag/study/" class="tag-cloud-link tag-link-133 tag-link-position-45" style="font-size: 21.791044776119px;" aria-label="study (7 items)">study</a>, <a href="https://www.idea.org/blog/tag/twitter/" class="tag-cloud-link tag-link-164 tag-link-position-46" style="font-size: 22.537313432836px;" aria-label="Twitter (8 items)">Twitter</a>, <a href="https://www.idea.org/blog/tag/user-interface/" class="tag-cloud-link tag-link-20 tag-link-position-47" style="font-size: 28.358208955224px;" aria-label="user interface (21 items)">user interface</a>, <a href="https://www.idea.org/blog/tag/video/" class="tag-cloud-link tag-link-118 tag-link-position-48" style="font-size: 21.791044776119px;" aria-label="video (7 items)">video</a>, <a href="https://www.idea.org/blog/tag/visitors/" class="tag-cloud-link tag-link-97 tag-link-position-49" style="font-size: 25.522388059701px;" aria-label="visitors (13 items)">visitors</a>, <a href="https://www.idea.org/blog/tag/visualization/" class="tag-cloud-link tag-link-199 tag-link-position-50" style="font-size: 21.044776119403px;" aria-label="visualization (6 items)">visualization</a> </div> </div> <div class="js-ajax-frame"> <section class="post-list"> <h3>Recent posts</h3> <article class="post"> <div class="article-footer"> <time datetime="2014">5 Mar 2014</time> <h4><a href="https://www.idea.org/blog/2014/03/05/gender-role-literacy-girls-in-science/">Gender role literacy: Girls in science?</a></h4> </div> <p>There are gender wars, and then there are casualties. It wasn’t until 2011 that the behemoth toymaker LEGO acknowledged girls’ desire to build with bricks, even though the company had long before made a seemingly effortless pivot to co-branding, video games, and major motion pictures. So it’s little wonder that girls face all-too-real obstacles when <a href="https://www.idea.org/blog/2014/03/05/gender-role-literacy-girls-in-science/">[…]</a></p> <a class="more" href="https://www.idea.org/blog/2014/03/05/gender-role-literacy-girls-in-science/">Read more</a> </article> <article class="post"> <div class="article-footer"> <time datetime="2013">9 Dec 2013</time> <h4><a href="https://www.idea.org/blog/2013/12/09/challenges-of-crowdsourcing-analysis-of-historypin/">Challenges of crowdsourcing: Analysis of Historypin</a></h4> </div> <p>Crowdsourcing can build virtual community, engage the public, and build large knowledge databases about science and culture. But what does it take, and how fast can you grow? For some insight, we look at a crowdsourced history site: Historypin is an appealing database of historical photos, with dates, locations, captions, and other metadata. It’s called History <a href="https://www.idea.org/blog/2013/12/09/challenges-of-crowdsourcing-analysis-of-historypin/">[…]</a></p> <a class="more" href="https://www.idea.org/blog/2013/12/09/challenges-of-crowdsourcing-analysis-of-historypin/">Read more</a> </article> <article class="post"> <div class="article-footer"> <time datetime="2013">18 Nov 2013</time> <h4><a href="https://www.idea.org/blog/2013/11/18/dinovember-creative-literacy-starts-young/">Dinovember: Creative literacy starts young</a></h4> </div> <p>“Uh-oh,” Refe Tuma heard his girls whisper. “Mom and Dad are not going to like this.” It’s Dinovember, and his family’s plastic dinosaurs have been getting into mischief all month. Every year, Tuma and his wife devote the month of November to “convincing our children that, while they sleep, their plastic dinosaur figures come to life. Related <a href="https://www.idea.org/blog/2013/11/18/dinovember-creative-literacy-starts-young/">[…]</a></p> <a class="more" href="https://www.idea.org/blog/2013/11/18/dinovember-creative-literacy-starts-young/">Read more</a> </article> </section> </div> </div> </div> </div> </header> <main role="main" id="main"><div id="twocolumns"> <div class="container"> <h1>Interactive appliances & widgets</h1> <div class="twocolumns-holder"> <section id="content" class="about-holder img-posts"> <article class="post"> <p>Using minimum complexity and maximum consistency in interactive UIs.<span id="more-207"></span></p> <table border="0" cellspacing="5" cellpadding="0" width="233" align="right"> <tbody> <tr> <td align="right"><img src="http://www.idea.org/i/interactivity/indexweather20050412.jpg" border="0" alt="" width="143" height="102" /><br />  </p> <p>Weather: View temperature, expected high and low and a six-day forecast.</p> <p><img src="http://www.idea.org/i/interactivity/indexcalendar20050412.jpg" border="0" alt="" width="90" height="123" /><br /> Calendar: View the current day and date or click the calendar to reveal the days of the month.</p> <p><img src="http://www.idea.org/i/interactivity/indexdictionary20050412.jpg" border="0" alt="" width="192" height="118" /><br /> Quickly find definitions by typing all or part of a word.</p> <p><img src="http://www.idea.org/i/interactivity/indexflight20050412.jpg" border="0" alt="" width="201" height="92" /><br /> Flight Tracker: Enter an airline, flight number and destination or departure city. For flights in progress, a map displays the flight’s approximate location.</td> </tr> </tbody> </table> <h1>Problem</h1> <p>You need to decide between making generalized tools that all work similarly, and inventing several unique tools.</p> <h1>Solution</h1> <p>Add just the controls necessary to yield a functional information appliance, but do not add unneeded controls (excessive features) or portions (like gears) that a real appliance might have.</p> <h1>Discussion</h1> <p>Keep the user interface widgets common. For example, if you use bright green knobs in one interactivity setting, use bright green knobs in other settings. At the same time, the design of your interactive figures should always match its purpose. Use the minimum amount of complexity to achieve your purpose.</p> <p>For millennia, tools have been invented to achieve just one purpose. In 1978 at Apple Computer, Jef Raskin first promoted the idea of a simple device designed around the information needs of a single function. The concept of focusing on a single function has evolved into a design strategy for interactive tools hoping to break through the complexity barrier imposed by such generic computing devices as the personal computer.</p> <p>For example, the stopwatch is not useful for telling time, but it is both useful and highly usable for timing the duration of events. The stopwatch is a highly specialized information appliance that does one thing—track elapsed time—very well.</p> <div class='yarpp-related'> <h3>Related posts:</h3><ol> <li><a href="https://www.idea.org/blog/2006/06/01/modeling-and-altering-reality/" rel="bookmark" title="Modeling and altering reality">Modeling and altering reality </a> <small>By manipulating models, visitors understand how components interact....</small></li> <li><a href="https://www.idea.org/blog/2006/06/01/animated-keys-quantitative/" rel="bookmark" title="Animated keys (quantitative)">Animated keys (quantitative) </a> <small>Displaying only selected data provides clarity and enhances discovery. Problem You need to display quantitative information about an...</small></li> <li><a href="https://www.idea.org/blog/2006/06/01/views-of-data/" rel="bookmark" title="Views of data">Views of data </a> <small>Reducing multidimensional data enables visitors to control what they see....</small></li> <li><a href="https://www.idea.org/blog/2006/06/01/interacting-with-objects/" rel="bookmark" title="Interacting with objects">Interacting with objects </a> <small>Imparting greater understanding through object manipulation....</small></li> <li><a href="https://www.idea.org/blog/2006/06/01/independent-and-dependent-variables/" rel="bookmark" title="Independent and dependent variables">Independent and dependent variables </a> <small>Incorporating intuitive graphs provides visitors with new insights....</small></li> </ol> </div> </article> <section class="comment-respond"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2006/06/01/interactive-appliances-widgets/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://www.idea.org/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form"> <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> <p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='207' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f159277887" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="79"/></p> </form> </div> </section> </section> <aside id="sidebar"> <section class="widget inner-text"> <h3>Related posts</h3> <article class="post"> <h2><a href="https://www.idea.org/blog/2006/06/01/modeling-and-altering-reality/">Modeling and altering reality<i class="icon-arrow-right-alt1"></i></a></h2> <p>By manipulating models, visitors understand how components interact. Related posts: Interactive appliances & widgets Using minimum complexity and maximum consistency in interactive UIs…. Virtual devices & experiences Incorporating interactivity that is purposeful.   Users perform knee surgery, understanding the process and steps. (EdHeads) Exploring the… Animated keys (quantitative) Displaying only selected data provides clarity and <a href="https://www.idea.org/blog/2006/06/01/modeling-and-altering-reality/">[…]</a></p> </article> <article class="post"> <h2><a href="https://www.idea.org/blog/2006/06/01/animated-keys-quantitative/">Animated keys (quantitative)<i class="icon-arrow-right-alt1"></i></a></h2> <p>Displaying only selected data provides clarity and enhances discovery. Problem You need to display quantitative information about an image, such as calories of foods, carbon dioxide output per country, or the number of voters per state. Solution Display a fixed key alongside the image, and display or highlight relevant data as the visitor points at <a href="https://www.idea.org/blog/2006/06/01/animated-keys-quantitative/">[…]</a></p> </article> <article class="post"> <h2><a href="https://www.idea.org/blog/2006/06/01/views-of-data/">Views of data<i class="icon-arrow-right-alt1"></i></a></h2> <p>Reducing multidimensional data enables visitors to control what they see. Related posts: Animated keys (quantitative) Displaying only selected data provides clarity and enhances discovery. Problem You need to display quantitative information about an… Interacting with objects Imparting greater understanding through object manipulation…. Independent and dependent variables Incorporating intuitive graphs provides visitors with new insights…. Modeling <a href="https://www.idea.org/blog/2006/06/01/views-of-data/">[…]</a></p> </article> <article class="post"> <h2><a href="https://www.idea.org/blog/2006/06/01/interacting-with-objects/">Interacting with objects<i class="icon-arrow-right-alt1"></i></a></h2> <p>Imparting greater understanding through object manipulation. Related posts: Animated keys (quantitative) Displaying only selected data provides clarity and enhances discovery. Problem You need to display quantitative information about an… Views of data Reducing multidimensional data enables visitors to control what they see…. Independent and dependent variables Incorporating intuitive graphs provides visitors with new insights…. Modeling <a href="https://www.idea.org/blog/2006/06/01/interacting-with-objects/">[…]</a></p> </article> <article class="post"> <h2><a href="https://www.idea.org/blog/2006/06/01/independent-and-dependent-variables/">Independent and dependent variables<i class="icon-arrow-right-alt1"></i></a></h2> <p>Incorporating intuitive graphs provides visitors with new insights. Related posts: Animated keys (quantitative) Displaying only selected data provides clarity and enhances discovery. Problem You need to display quantitative information about an… Views of data Reducing multidimensional data enables visitors to control what they see…. Interacting with objects Imparting greater understanding through object manipulation…. Modeling and <a href="https://www.idea.org/blog/2006/06/01/independent-and-dependent-variables/">[…]</a></p> </article> </section> </aside> </div> </div> </div> </main> <aside class="info-links"> <div class="container"> <div class="left-holder"> <p><time datetime="2006">01 Jun 2006</time> , post by <a href="https://www.idea.org/blog/author/idea/" title="Posts by IDEA" rel="author">IDEA</a></p> </div> <div class="right-holder"> <ul> <li><a href="https://www.idea.org/blog/tag/widget/">widget</a></li> <li><a href="https://www.idea.org/blog/tag/interactivity-2/">interactivity</a></li> <li><a href="https://www.idea.org/blog/tag/apple/">Apple</a></li> <li><a href="https://www.idea.org/blog/tag/user-interface/">user interface</a></li> </ul> </div> </div> </aside> <aside class="items-holder"> <div class="container"> <div class="list-items widget-apps-widget"><h3>Read more about <br class="separator"><strong>our language-related apps.</strong></h3> <ul> <li> <div class="item-holder"> <a href="http://www.idea.org/otherwordly"> <picture>  <source srcset="https://www.idea.org/blog/wp-content/uploads/2023/09/otherwordly_appicon_1024px_rounded_01-35x36.png, https://www.idea.org/blog/wp-content/uploads/2023/09/otherwordly_appicon_1024px_rounded_01-70x70.png 2x" media="(max-width: 767px)"> <source srcset="https://www.idea.org/blog/wp-content/uploads/2023/09/otherwordly_appicon_1024px_rounded_01-70x70.png, https://www.idea.org/blog/wp-content/uploads/2023/09/otherwordly_appicon_1024px_rounded_01-140x140.png 2x">  <img src="https://www.idea.org/blog/wp-content/uploads/2023/09/otherwordly_appicon_1024px_rounded_01-70x70.png" alt=""> </picture> <span class="title" style="color:#c46e3c">OtherWordly</span> </a> </div> </li> <li> <div class="hr"></div> <div class="item-holder"> <a href="http://www.idea.org/inotherwords"> <picture>  <source srcset="https://www.idea.org/blog/wp-content/uploads/2023/09/inotherwords_appicon_1024px_rounded_01-35x36.png, https://www.idea.org/blog/wp-content/uploads/2023/09/inotherwords_appicon_1024px_rounded_01-70x70.png 2x" media="(max-width: 767px)"> <source srcset="https://www.idea.org/blog/wp-content/uploads/2023/09/inotherwords_appicon_1024px_rounded_01-70x70.png, https://www.idea.org/blog/wp-content/uploads/2023/09/inotherwords_appicon_1024px_rounded_01-140x140.png 2x">  <img src="https://www.idea.org/blog/wp-content/uploads/2023/09/inotherwords_appicon_1024px_rounded_01-70x70.png" alt=""> </picture> <span class="title" style="color:#8b8be0">In Other Words</span> </a> </div> </li> <li> <div class="hr"></div> <div class="item-holder"> <a href="http://www.idea.org/linguabase"> <picture>  <source srcset="https://www.idea.org/blog/wp-content/uploads/2023/09/linguabase_appicon_1024px_rounded_01-35x36.png, https://www.idea.org/blog/wp-content/uploads/2023/09/linguabase_appicon_1024px_rounded_01-70x70.png 2x" media="(max-width: 767px)"> <source srcset="https://www.idea.org/blog/wp-content/uploads/2023/09/linguabase_appicon_1024px_rounded_01-70x70.png, https://www.idea.org/blog/wp-content/uploads/2023/09/linguabase_appicon_1024px_rounded_01-140x140.png 2x">  <img src="https://www.idea.org/blog/wp-content/uploads/2023/09/linguabase_appicon_1024px_rounded_01-70x70.png" alt=""> </picture> <span class="title" style="color:#b859cc">Liguabase</span> </a> </div> </li> </ul> </div> </div> </aside> <footer id="footer"> <div class="container"> <nav class="page-nav"> <ul> <li id="menu-item-4498" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-4498"><a href="https://www.idea.org/blog/">Home</a></li> <li id="menu-item-4497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4497"><a href="https://www.idea.org/blog/about/">Mission & history</a></li> <li id="menu-item-4499" class="popup menu-item menu-item-type-custom menu-item-object-custom menu-item-4499"><a title="popup" class="js-btn-show-popups" href="#wrapper">Browse topics</a></li> <li id="menu-item-4666" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4666"><a href="https://www.idea.org/blog/contact/">Contact IDEA</a></li> <li>Copyright © 2025 <a href="https://www.idea.org/blog">IDEA</a></li> </ul> </nav> </div> </footer> </div> <link rel='stylesheet' id='yarppRelatedCss-css' href='//www.idea.org/blog/wp-content/plugins/yet-another-related-posts-plugin/style/related.css' type='text/css' media='all' /> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/www.idea.org\/blog\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type='text/javascript' src='//www.idea.org/blog/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript' src='//www.idea.org/blog/wp-content/themes/ideaorg/js/comment-reply.js'></script> <script type='text/javascript' src='//www.idea.org/blog/wp-content/themes/ideaorg/js/jquery.main.js'></script> <script type='text/javascript' src='//www.idea.org/blog/wp-includes/js/wp-embed.min.js'></script> <script async="async" type='text/javascript' src='//www.idea.org/blog/wp-content/plugins/akismet/_inc/form.js'></script> </body>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y68B45MT0H"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y68B45MT0H'); </script> </html>

CINXE.COM

Interactive appliances & widgets – IDEA