Forward 2 Notes - Part 2</h1> <article> <h1>Forward 2 Notes - Part 2</h1> <p>2015-02-08T00:00:00-08:00</p> <h1 id="forward-2-notes---part-2">Forward 2 Notes - Part 2</h1> <p><em>This post is a continuation from my earlier post, <a href="/forward-notes-1">Foward 2 Notes - Part 1</a></em></p> <figure> <figcaption>Swaaag!</figcaption> </figure> <p>Here are the talks I attended:</p> <ol> <li>Keynote by Karolina Szczur and Sarah Groff-Paermo</li> <li>The Better Parts, Douglas Crockford</li> <li>What the… JavaScript?, Kyle Simpson</li> <li>We Will All Be Game Programmers, Hunter Loftis</li> <li>No More Tools, Karolina Szczur</li> <li>Developing High Performance Websites and Modern Apps with JavaScript and HTML5, Doris Chen</li> <li>Love & Node, Sarah Groff-Palermo</li> <li>Developer Led Innovation, James Sacra</li> <li>Choosing a JavaScript Framework, Pam Selle</li> <li>Test-driven client-side apps, Pete Hodgson</li> </ol> <p>This post will have notes on the remaining talks starting with Hunter Loftis. Enjoy!</p> <h2 id="we-will-all-be-game-developers-hunter-loftis">We Will All Be Game Developers, Hunter Loftis</h2> <p>3 weeks to build out an FPS game in HTML5 for an internationally releasing album.</p> <p>Issues</p> <ol> <li>Budget (cheap), because the marketing people found Hunter really late, and so they had little left</li> <li>3 weeks</li> <li>Technical constraints (must work on iPhone, iPad, Android & Desktop!)</li> </ol> <p>Sure! sounds like an awesome project. Why not help these “no-name” artists. But… Apparently the guy behind the album is a big artist in the UK, and Hunter was the no-name artist. Pressure! For the next three weeks, no sleep.</p> <p>“Optimism is an occupational hazard of programming” - Kent Beck</p> <h3 id="demo">Demo</h3> <figure> <figcaption>Demo of game built in 3 weeks</figcaption> </figure> <ul> <li>Looks a lot like minecraft</li> <li>The cool part is that if you get lost in the maze, it plays the sound track “Lost”</li> <li>Got a Kotaku article out of it as well. Now technically a “game developer”</li> </ul> <h3 id="why-should-you-care">Why should You Care?</h3> <ul> <li>Application interfaces are becoming more like games</li> <li>JS developers aren’t strong in game development. But the tech industry is moving towards game like interfaces with Holograph, VR, leap motion, etc</li> <li>Building a simple game like pong is a lot harder than most complicated applications</li> </ul> <h3 id="ideas-from-game-dev-for-better-user-interfaces">3 Ideas from Game Dev for Better User Interfaces</h3> <p>Let’s steal from game dev community</p> <p><em>1. Minimize and isolate state.</em></p> <ul> <li>State is the root of all evil</li> <li>JS makes it easy to add type to anything</li> <li>Game devs don’t have much luxury. Compare Todolists VS Call of Duty. There’s much more state to manage and yet they get 60 fps. Minimizing state is important for complex applications</li> </ul> <p>For a simple game of a guy walking around, we might need to keep track of:</p> <ul> <li>direction</li> <li>XY coordinates</li> <li>velocity</li> <li>If he runs fast, kick off dust…</li> </ul> <p>We can all capture all that with just these:</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">Player</span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">];</span> <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">];</span> <span class="k">this</span><span class="p">.</span><span class="nx">interval</span> <span class="k">this</span><span class="p">.</span><span class="nx">distance</span> <span class="p">}</span></code></pre></div> <p>And a set of pure functions. Given an input -> Always the same output.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">velocity</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getVelocity</span><span class="p">(</span><span class="nx">state</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span> <span class="nx">state</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span> <span class="nx">state</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getDirection</span><span class="p">(</span><span class="nx">velocity</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">pose</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getPose</span><span class="p">(</span><span class="nx">state</span><span class="p">.</span><span class="nx">distance</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">frame</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFrame</span><span class="p">(</span><span class="nx">direction</span><span class="p">,</span> <span class="nx">post</span><span class="p">);</span></code></pre></div> <p>No side effects. The point is to figure out where the state is, and then use pure functions to derive the rest.</p> <p><em>2. Enforce deterministic rendering (frames should be independent)</em></p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">render</span><span class="p">(</span><span class="nx">seconds</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">seconds</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">getState</span><span class="p">());</span> <span class="p">}</span></code></pre></div> <p>It would be a lot easier to do undo / redo if we kept a history of states, instead of modifying a state object directly. (again, FP and immutability is a big hot topic at Forward.)</p> <p>Keep state independent of rendering. React is great at doing this. React works like a game engine and supports isomorphic JS</p> <p><em>3. Separating rendering and simulation</em></p> <p>Simulation leads to good animation.</p> <p>The pursuit of 60fps</p> <p>Compared to:</p> <ul> <li>cinema: 24fps</li> <li>with blur: 18fps</li> <li>fighter pilos: 220 fps!!</li> </ul> <p>If you’re delivering any online experience, optimize for 60 fps</p> <ul> <li><code>setInterval(frame, 0)</code> is bad</li> <li><code>setInterval(frame, 17)</code> is better, but does not guarantee that the frame method runs at the next frame</li> <li><code>requestAnimationFrame(frame)</code> is better, but is not fully guaranteed because you can still drop frames. If that virus scanner runs while your game is running, your game might drop frames.</li> </ul> <p>Instead, what you want to do is decouple rendering and simulation. If you drop a frame, you track it. For every frame you drop, you simulate it. Drop 2 frames, simulate it twice. This way, you get the same exact behavior, regardless of dropped frames.</p> <h3 id="my-favorite-bug">My favorite bug</h3> <figure> <figcaption>Created a git tag just for finding this bug.</figcaption> </figure> <h3 id="kens-thoughts">Ken’s Thoughts</h3> <p>What he said about TODOMVC makes a lot of sense… We fuss over which framework to use to build such a simple TODOMVC, yet game developers are building complex worlds and game mechanics all in 60 fps.</p> <h2 id="no-more-tools-karolina-szczur">No More Tools, Karolina Szczur</h2> <p>Have we reached a tipping point with too many tools? A look at up-to-date front-end tooling and better ideas for teamwork</p> <h3 id="tools">Tools</h3> <p>Tool - we have a plethora of tools to use to help us make our lives easier, but is that always the case?</p> <p>“Creatives aren’t good at their art because of their tools; their talent stems from the skills and knowledge they’ve acquired while using their tools” - The Good Creative - Paul Jarvis</p> <p>But tools are still good to use. Which frameworks / tools are good and what will eventually break our heart?</p> <p>Things to think about</p> <ul> <li>Simplicity. Two types of simple. Visual simple - does it look simple to use? Operational simplicity - is it easy to use</li> <li>Does it allow us to single-thread our attention? Most crucial skill is to not multi-task, but single-threading our attention.</li> <li>Complexity. The time it takes to learn something. Tesler’s Law of Conservation of Simplicity. The strive for simplicity is superficial because at times, complexity is necessary. Its a fact of the world and simplicity is in the mind.</li> </ul> <h3 id="automation">Automation</h3> <p>Automation gives us time to work on problems that cannot be delegated to scripts</p> <p><em>Tools</em></p> <ul> <li>Autoprefixer - worry-free vendor prefixing</li> <li>Linting - check for bad patterns</li> <li>Media Optimisation - strip unnecessary bytes.</li> <li>Minification - strip unnecessary characters</li> <li>Code bloat - might might not be useful. Search and remove unused declarations</li> <li>Testing performance - find specific elements hindering performance</li> <li>Debugging layout issues - find problems with the box model. pesticide.io</li> <li>GUIs for automation - Hammer format, codekit, livereload</li> </ul> <p><em>NPM</em></p> <ul> <li>NPM is a way to run scripts as well. Its a native ecosystem for task automation.</li> <li>Some people think npm for front-packaging isn’t good enough, but “npm loves you, front-enders, and we are about your use cases.”</li> <li>bit.ly/leveldb-example</li> <li>bit.ly/npm-task-automation</li> </ul> <p><em>Gulp & Grunt</em></p> <ul> <li>Alternatives to make</li> <li>Gulp might be better for node people because it uses streams.</li> <li>Grunt is more configuration over coding.</li> <li>Which is better? Matter of preference. She seems to prefer Gulp</li> </ul> <p><em>Make</em></p> <ul> <li>Why not use make? People tend to forget about it, but make is quite powerful</li> <li>bit.ly/buidling-static</li> </ul> <h3 id="when-to-do-what">When to do what?</h3> <ul> <li>When should we minify code?</li> <li>A Case for minifying and committing the minified code. -> Allows people without minification tools to use your scripts</li> </ul> <h3 id="collaboration">Collaboration</h3> <ul> <li>The tools are there to empower ourselves.</li> <li>Collaboration happens when our own set of biases doesn’t cloud judgement. Tools are a way</li> </ul> <h2 id="developing-high-performance-websites-and-modern-apps-with-js-and-html5-doris-chen">Developing High Performance Websites and Modern Apps with JS and HTML5, Doris Chen</h2> <h3 id="game---how-to-make-it-run-faster">Game - How to make it run faster</h3> <p>This talk is about the principles to improving the JS performance of your app</p> <p>Today, we’ll improve a game called High Five Yeah. The more you get high fives, the more points you get.</p> <figure> <figcaption>High Five Yeah!</figcaption> </figure> <p>Components and control flow of the game</p> <ol> <li>Matrix of players</li> <li>Each player has a set of directions</li> <li>On touch select a player</li> <li>Generate a list of neighbors to rotate</li> <li>Rorate the player</li> <li>Repeat from step 4</li> </ol> <p>The game allocates lots of memory if you increase the size of the grid.</p> <p>Always measure</p> <ul> <li>profile the game.</li> <li>Define the criteria of what “fast enough” is first. You can use IE, but feel free to use other tools.</li> <li>IE developer tool has a tab called responsiveness. It gives you a chart of FPS and CPU usage.</li> <li>The three important measurements - CPU (tied to battery life), GPU, and FPS.</li> <li>Similar to chrome, IE dev tools gives you color coded results - yellow for layout, green for css style calculations, etc.</li> <li>The goal is to have a flat 60 fps, no dips in the charts.</li> </ul> <h3 id="principle-1-memory-usage---stay-lean">Principle 1: Memory usage - Stay Lean</h3> <ul> <li>Every call to new or implicit memory allocation reserves GC memory - allocations are cheap until current pool is exhausted. Every time the GV happens, we will see some obvious pauses</li> <li>When pool is exhausted, engines force a collection</li> </ul> <p>Best practices for staying lean</p> <ul> <li>Avoid unnecessary object creation</li> <li>Look at object creation pattern. Use object pools when possible.</li> <li>Be aware of allocation patterns, such as Setting closures to event handlers.</li> </ul> <h3 id="principle-2-use-fast-object-types-and-manipulations">Principle 2: Use Fast Object Types and Manipulations</h3> <ul> <li>In JS the order of a hash map matters. It is better to keep the “shape” the same. For example. <code>var a = {}; a.north = 1; a.south = 0;</code> and <code>var b = {}; b.south = 0; b.north = 1</code> do not share the same “shape”</li> <li>Avoid creating slower property bags. Don’t use getters and setters for perf critical paths. For example, its probably better to use <code>this.n = north</code> instead of doing</li> </ul> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"n"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">get</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">nVal</span><span class="p">;}</span> <span class="p">})</span></code></pre></div> <ul> <li>Use simple objects for perf critical paths</li> <li>Never use <code>delete</code>, it is sloooow</li> </ul> <h3 id="principle-3-best-practices-for-fast-arithmetic">Principle 3: Best Practices for Fast Arithmetic</h3> <ul> <li>Use 31-bit integer math when possible. 31 will go onto the stack, but a 32 float will not. It needs to move to a slower, long term storage.</li> <li>Avoid floats if they are not needed</li> <li>Design for type specialized arithmetic. Try to separate floating arithmetic from integer arithmetic</li> </ul> <h3 id="principle-4-do-less-work">Principle 4: Do Less Work</h3> <p>Avoid chattiness with the DOM</p> <p>BAD</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">get</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id"</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">oldClass</span><span class="p">)</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">get</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id"</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">newClass</span><span class="p">)</span></code></pre></div> <p>GOOD</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">get</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id"</span><span class="p">).</span><span class="nx">classList</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">oldClass</span><span class="p">);</span> <span class="nx">el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">newClass</span><span class="p">)</span></code></pre></div> <p>If you know a value is a integer, such as when <code>this.borderSize = domelement.getBorderSize</code>, it is better to <code>parseInt</code> it. 25% better performance in marshaling.</p> <p>Paint as much as your users can see, which is 60 FPS</p> <ul> <li>BAD <code>setTimeout(animate, 0)</code> <- this is more work because its trying to animate too many times.</li> <li>BETTER <code>requestAnimationFrame(animate)</code> <- let the browser determine when to animate</li> </ul> <h3 id="key-take-away">Key Take Away</h3> <p>For super performance critical code, we can do a lot of micro optimizations to make performance better. Better performance = longer battery life,</p> <h2 id="love--node-sarah-groff-palermo">Love & Node, Sarah Groff-Palermo</h2> <p>This is the second part to her key note about relatables - objects that allow us to explore the relationship between people and objects</p> <h3 id="creating-relatability">Creating Relatability</h3> <p>How do we create a robot that is relatable?</p> <p>There are 6 ways</p> <ol> <li>Give it a face. From a very young age, humans are learned to detect faces. <a href="https://twitter.com/facepics">@facepics</a></li> <li>Sense of agency</li> <li>Social behavior - teaching objects to remember.</li> <li>Make the robot unpredictable. gives the feeling of personality</li> <li>Creating a sense of helplessness. Helps people feel less lonely.</li> <li>Objects that mimic us. If I turn my head and it turns its head then we like it.</li> </ol> <h3 id="process">Process</h3> <p>How does one create a robot? Her process.</p> <p>Take input -> Do something with it (the gear) -> Output</p> <p><em>1. Take input</em></p> <ul> <li>Information to take in, who is nearby, how are you feeling, which books haven’t I read?</li> <li>Tools to use - proximity (IR and ultrasonic), climate temp and humidity, ambient (light and sound), bluetooth, gas, accelerometer, motion, touch (capacitive and pressure) sensors.</li> </ul> <p><em>2. The gear</em></p> <ul> <li>Turn inputs into outputs. Tessel, Arduino, and RPi.</li> <li>Arduino - C derived Arduino language. Node via Johnny 5, DIY / Sheilds Tessel - Node, wifi builtin, high-level modules</li> <li>Both have awesome communities</li> </ul> <p><em>3. Outputs</em></p> <p>Possible outputs</p> <ul> <li>regular LEDS</li> <li>addressable LEDS</li> <li>motors</li> <li>servors speakers</li> </ul> <h3 id="projects">Projects</h3> <ul> <li>FriendBot - Built at SFPC</li> <li>Neo-Neglect - Books that have emotion. If it isn’t read for a while, it screams “You’re a monster!”</li> <li>Spiny - Actually a failure, but its always a good thing to love all our monsters</li> <li>Deluge - The feelings of being overwhelmed. Senses BT signals in a room and visualizes it</li> </ul> <h3 id="questions-and-demos">Questions and Demos</h3> <figure> <figcaption>FriendBot being friendly</figcaption> </figure> <h2 id="developer-led-innovation-james-sacra">Developer Led Innovation, James Sacra</h2> <h3 id="failure">Failure</h3> <ul> <li>Developed new prototype for voice recognition in 3 months and ready to blow manager minds away</li> <li>Got embarrassed at a call with sales people. Turns out users didn’t want the prototype he developed.</li> </ul> <p>How did he fail?</p> <ul> <li>He didn’t understand the key problem</li> <li>He didn’t explain the solution</li> <li>He didn’t gain traction</li> </ul> <h3 id="steps-to-getting-your-idea-heard">Steps to Getting Your Idea Heard</h3> <p>Step 0: Need a friend (ally). - Someone to support your ideas. They can help you push your ideas from a unique perspective. - Who should you befriend? Fellow developers, technical managers, business support, etc. Grab them over lunch, talk to them</p> <p>Step 1: What’s the problem?</p> <ul> <li>In order to innovate you must understand the problem. Its not about, oh I want to use D3!</li> <li>Quantify - 20% of customers are negatively impacted? What is the probem and how do you quantify it?</li> <li>At the same time, its important to keep developers happy and NOT use a technology from 10 years ago.</li> </ul> <p>Step 2: Innovate</p> <ul> <li>Think tank! Innovate. Hackathons. This can even be a 3, 4 hour meeting with key people.</li> <li>Prototyping - gives you answers you need in next step, a great demo, and flushes out a lot problems</li> </ul> <p>Step 3: Define the solution</p> <ul> <li>Quantify the solution - “We developed a prototype in half the time than we could in the existing framework”</li> <li>Keyword is “we”.</li> <li>People usually don’t realize minor performance issues until they see numbers.</li> </ul> <p>Step 4: Pitch</p> <ul> <li>Make a presentation. Include your assessment of the problem, impact to the business, and the solution. It will help you think through questions that wil be asked and might even lead you to do more research</li> <li>Technical initiatives - at this point you should have a strong case for why you idea needs to be heard. And if you’re not being heard, go back to step 0</li> </ul> <h3 id="troubleshooting">Troubleshooting</h3> <ul> <li>“No matter what I do… I can’t get someone to listen”. This is just an excuse. You haven’t put in the effort to be heard.</li> <li>“We don’t have enough available resources to innovate”. No, you do. During lunch or meetings or whatever, find the time</li> </ul> <h3 id="key-take-away-1">Key Take Away</h3> <p>Don’t be afraid to fail, that is the only way to succeed</p> <h2 id="choosing-a-javascript-framework-pam-selle">Choosing a Javascript Framework, Pam Selle</h2> <p>There’s a <a href="http://shop.oreilly.com/product/9781939902085.do">book</a>!</p> <p>Spoiler: I will not tell you what to do. The hope is for you to make informed decisions for a project</p> <h2 id="what-is-a-js-framework">What is a JS framework?</h2> <ul> <li>Most framework were built in 2009 / 2010 - “Oh I found that I was building the same thing over and over again for consultants so I figured, I should build my own!”</li> <li>Frameworks are good because you shouldn’t have to write boilerplate code.</li> <li>Ask yourself, what’s our 15% (the thing that is not boilerplate, and makes your app special) Then find the framework that makes you go fast</li> </ul> <h3 id="backbone">Backbone</h3> <ul> <li>Backbone comes from a Rails world</li> <li>It’s the “core” of an application</li> <li>It’s un-opiniated. Generally more flexible. e.g. incorporating other libraries. This is both a strength and a weakness</li> <li>Has models, views, collections, events, and routing</li> <li>It’s quite intuitive to get started</li> </ul> <h3 id="angular">Angular</h3> <ul> <li>Fastest growing JS framework…</li> <li>Directives! and Google!</li> <li>Strongly defined building components (directives, controllers, services)</li> <li>Dependency injection</li> <li>Two way bindings</li> <li>Karma and protractor for testing</li> <li>No dependencies</li> <li>Strengths - once you know what you are doing, there’s less to write. Long feature list. Module-friendly. Google backing</li> <li>Weaknesses - not as battle tested. High lock-in with writing behavior in markup. Skeptical about Google backing. 2.0 drops backwards compatibility</li> <li>Has Modules, Directives, Services, Controllers, and other components like Filters, animations, i18n, l10n</li> </ul> <h3 id="ember">Ember</h3> <ul> <li>Most complete JS framework (not necessarily the best). Used for really intense client side applications</li> <li>Built completely on modular open source components</li> <li>Community super-powered</li> <li>Very strongly defined MVC components</li> <li>two way data binding</li> <li>Ember components (like directives or web components)</li> <li>dependency injection</li> <li>Routing</li> <li>Dependencies - ember-data, jQuery, handlebars</li> <li>Strengths - convention driven like rails, the community!</li> <li>Weaknesses - Sometimes TOOO much information, the “right” way to do things = difficult to get up to speed quickly, lots of rules, not as pervasive as other two frameworks</li> </ul> <p>Rising stars!</p> <h3 id="react">React</h3> <ul> <li>React is like git diffs for browser rendering</li> <li>Super performant</li> <li>The view of MV*</li> </ul> <h3 id="polymerjs">PolymerJS</h3> <ul> <li>Web components!</li> </ul> <h3 id="evaluating-frameworks">Evaluating frameworks</h3> <ul> <li>TODOMVC</li> <li>bit.ly/lg6kDSS - ranking for spreadsheets</li> <li>Rank frameworks according to bsuiness, tehcnical, and team criteria</li> <li>DevTap - technological evaluations</li> </ul> <h2 id="test-driven-client-side-apps-pete-hogsdon">Test Driven Client-side Apps, Pete Hogsdon</h2> <h3 id="test-driven-development">Test driven development</h3> <ol> <li>Write a failing test</li> <li>Write code that makes it pass</li> <li>Refactor code (people miss this part a lot)</li> <li>Go back to 1</li> </ol> <p>The whole point is to build out a test suite that gives you the safety net to go and refactor your code to make it better</p> <h3 id="whats-the-advantage-of-tdd">What’s the Advantage of TDD?</h3> <ul> <li>Feedback! TDD gives repeated, consistent, direction on a granular level as to if your code works as you specified it.</li> <li>Feedback on the design of your code. It makes you write code that is easier to test</li> <li>Easily testable code makes it easier to work with. “This code is hard to test” === “This code is hard to work with”</li> </ul> <h3 id="live-coding---example-of-tdd">Live Coding - Example of TDD</h3> <ul> <li><a href="nxtbrt.com">nxtbrt.com</a> - single page app with list of BART departures.</li> <li>LIVE CODING - went through the above four steps to demonstrate power of TDD.</li> <li>We all want to rewrite a code base without any tests. We don’t make things better every time because we dont have the confidence to do it. TDD gives you that confidence.</li> <li>Feed back is rapid, focussed, and accurate.</li> </ul> <h3 id="functional-testing">Functional testing</h3> <ul> <li>The feedback you get back with functional testing is not as helpful because the scope is larger with FT. Especially if the functional test is testing an app with external dependencies such as HTTP and DOM.</li> <li>The key principle with unit tests is that we test an isolated unit of code. We get faster, more accurate feedback.</li> <li>Doesn’t mean functional testing is bad though.</li> </ul> <h3 id="key-take-away-2">Key Take Away</h3> <p>TDD drives developers toward better design</p> <h2 id="conclusion">Conclusion</h2> <p>And that’s it folks! Hope you got a glimpse of what Forward 2 was like. It will be interesting to look back to this post 10 years from now and see how JavaScript has moved forward. What I’d like to know is, will JavaScript still be the monopoly client-side language it is today? My gut feeling tells me that it will, and will be for a good long time.</p> </article> <article> <h1>Forward 2 Notes - Part 1</h1> <p>2015-02-04T00:00:00-08:00</p> <h1 id="forward-2-notes---part-1">Forward 2 Notes - Part 1</h1> <figure> <figcaption>Forward 2 at Hyatt Regency San Francisco</figcaption> </figure> <p>I had the opportunity to attend <a href="http://forwardjs.com/">Forward 2</a>, a conference dedicated to forward-looking, experimental JS and front-end technologies.</p> <p>Overall, I thought it was a well organized conference with awesome speakers. I’m quite exhausted from trying to distill all the information, but there was a ton of useful and practical tidbits that I look forward to putting into practice.</p> <p>Some of my highlights were:</p> <ol> <li>The Better Parts, by Douglas Crockford - Got me re-thinking about JavaScript best practices</li> <li>Love & Node, by Sarah Groff-Palermo - Inspirational talk that got me excited about hardware hacking again.</li> <li>We Will All Be Game Developers, by Hunter Loftis - Was completely blown away by Hunter Loftis’s crazy 3 week endeavor. Also learned why we should steal best practices from the game dev community.</li> </ol> <p>What I also have here are the <em>raw</em> notes I took at the conference. Some of it might not make sense much, but I think I got the gist of most of the talks.</p> <p>Here are my notes in order of talks I attended:</p> <ol> <li>Keynote by Karolina Szczur and Sarah Groff-Paermo</li> <li>The Better Parts, Douglas Crockford</li> <li>What the… JavaScript?, Kyle Simpson</li> <li>We Will All Be Game Programmers, Hunter Loftis</li> <li>No More Tools, Karolina Szczur</li> <li>Developing High Performance Websites and Modern Apps with JavaScript and HTML5, Doris Chen</li> <li>Love & Node, Sarah Groff-Palermo</li> <li>Developer Led Innovation, James Sacra</li> <li>Choosing a JavaScript Framework, Pam Selle</li> <li>Test-driven client-side apps, Pete Hodgson</li> </ol> <p>This post will have notes on the first three. I will post the rest soon in Part 2. Enjoy!</p> <h2 id="key-note-speaker-1-karolina-szczur">Key Note Speaker 1: Karolina Szczur</h2> <h3 id="how-to-build-better-communities">How to build better communities</h3> <ul> <li>Building better communities is inseparably intertwined with building a better self</li> <li>Practice empathy and gratitude.</li> <li>Look around. You don’t need street credit or be famous to be able to help someone</li> <li>Communicate compassionately</li> <li>Life’s most persistent and urgent question is - What are you doing for others? This question is important.</li> <li>Community is a group responsibility. There isn’t one person owning and managing the community. Making a better community is about mutual work.</li> </ul> <h3 id="key-take-away">Key Take Away</h3> <p>Let’s make the community better by taking responsibility and owning it.</p> <h2 id="key-note-speaker-2-sarah-groff-palermo">Key Note Speaker 2: Sarah Groff-Palermo</h2> <p>Love + Node @supersgp</p> <p>Sarah is a designer and artist that loves tech. Her talk was about IoT and the imminent dooms day, e.g. forfeiting power and control.</p> <h3 id="our-relationship-with-hardware">Our Relationship with Hardware</h3> <ul> <li>How and why we engage with hardware, internet of things. We can make prototypes of lovable relatable objects</li> <li>If researchers figure out what technology can do, artists can reveal how and ask what its for</li> <li>Art gets recognized as art by people standing up and saying as many times as they have to, i.e I made this, and it matters.</li> <li>Sarah showed two gifs of kill bot and beach both. We have to make good decisions so that we make a world of beach bots (dancing) and not kill bots</li> <li>We need to think about our relationship with objects, how we can love them.</li> </ul> <h3 id="cocerns-of-iot">Cocerns of IoT</h3> <ul> <li>IoT == distopia</li> <li>$1.4 biliion dollars in bio sensing, 60 million fitness trackers. Are we giving away our privacy? Are we giving too much power to the goverment?</li> <li>Internet of things raises substantial concerns about how we can keep control of our lives.</li> </ul> <h3 id="sarahs-theory">Sarah’s theory</h3> <ul> <li>We can make things networked and controllable, and monitored, but what are we going to do it …. for?</li> <li>What we can make objects be loyal, have sentiment. What if objects were assistive technology (chairs that hug back)</li> <li>We might actually being saving the world by doing this</li> </ul> <h3 id="relatables">Relatables</h3> <ul> <li>Allow objects to speak, have character, and be lovable</li> <li>Not only do objects that present information in a way that makes you act, but they talk to you. For example, a milk carton that speaks about the cows and how happy the cows are …</li> <li>Instead of creating monsters like Frankenstein, we should create relatables that we can love</li> </ul> <h3 id="anxeities">Anxeities</h3> <ul> <li>Technophobia - lack of understanding of technology. Deep concerns. By encouraging people to see objects as lovable, we can get them to understand technology</li> <li>Anthromorphism - Unfulfilling promises. We might be expecting a level of personal connection with robots, but they might not be able to deliver and so we feel like we are let down.</li> <li>Corporate overreach. Are we giving too much power away? We now have surveillance tools for everything. From pets, to kids, to even yourself. <a href="http://pavlok.com/">Pavlok</a> shocks you if you are doing something you don’t like.</li> </ul> <h3 id="examples">Examples</h3> <ul> <li>Sarah showed examples of some relatables</li> <li>Neo-Neglect - Books that tell you when they feel lonely. If the book wasn’t opened and read for a while, it “dies”. Made by putting copper wires inside books that detect when a book gets closed / open.</li> </ul> <h3 id="key-take-away-1">Key Take Away</h3> <p>If we make objects to be relatable, lovable and caring, maybe we won’t end up with dooms day.</p> <h2 id="the-better-parts-douglas-crockford">The Better Parts, Douglas Crockford</h2> <p>Author of Javascript: The Good Parts</p> <h3 id="the-good-parts">The Good Parts</h3> <p>Using programming languages more effectively, and using that experience to create and select better programming languages</p> <p>“It seems that perfection is attained not when there is no more to add, but when there is nothing more to subtract” - This applies to programming languages. Removing the bad parts.</p> <p>Principles of Good Parts</p> <ul> <li>if a feature is sometimes usable and sometimes dangerous and if there is a better option then always use the better options….</li> <li>We are not paid to use every feature of the language, We are paid to write programs that work well and are free of error</li> </ul> <p>Arguments Against Good Parts</p> <ol> <li>“Just a matter of opinion.”” DC - No, its not if it makes you write better code</li> <li>“Every feature is an essential tool.””</li> <li>“I have a right to use every feature.”” DC - “I have the right to write crap” (lol). We have the responsibility to write good code</li> <li>“I need the freedom to express myself.”</li> <li>“I need to reduce my key strokes.” DC - We don’t spend the majority of time writing code, but rather in times where we felt like this: “Oh what have I done… why does this not work”. If we can make a program error free, we’ll have less to type because there’s less to fix.</li> <li>“There was a good reason why there is that feature”</li> <li>“I would ever make a mistake with a dangerous feature.””</li> </ol> <p>The origin of triple equal - The guy who built double equal with coercion realized that double equal was bad, and so proposed a better solution, but it was turned down by committee due to legacy issues and instead was introduced as ===.</p> <h3 id="danger-driven-development">Danger Driven Development</h3> <p>Software development is difficult because of scheduling -</p> <ol> <li>The time it takes to write the code..</li> <li>The time it takes to make the code work right.</li> </ol> <p>We want to make 2 small as possible. We should take the time to write correct code.</p> <h3 id="new-good-parts-in-es6">New Good Parts in ES6</h3> <ul> <li>Proper tail calls - JS becomes a real functional programming language. DC’s most favorite feature</li> <li>Ellipsis …. aka… rest, aka… spread operator</li> <li>Modules. Much better than the crappy require stuff</li> <li>Let. let is the new var. A lot of people come from Java and the syntax between Java and JS are similar. BUT this causes confusion because the way JS works is different than Java. Using let removes the confusion.</li> <li>Weak maps. Its the way objects should always work. It was a mistake to make all keys a string. Now with weak maps, keys can be anything. They introduced weak maps because changing maps would break legacy code…</li> <li>DC does not think generators are not worth the effort</li> </ul> <h3 id="bad-part-in-es6">Bad Part in ES6</h3> <ul> <li>CLASSES. Java people wanted classes, but what ES6 gives them is a “class” that is just syntactic sugar. The way to think in JS is to think in FP.</li> <li><code>(name) => {id: name}</code>, for those people who hate to write ‘function’,… because its too much to type.</li> </ul> <p>Languages are better by making them smaller. Removing the imperfections.</p> <h3 id="good-parts-reconsidered">Good Parts Reconsidered</h3> <ul> <li>I stopped using <code>new</code> years ago. Use <code>Object.create</code> instead.</li> <li>Now I stopped using <code>Object.create</code>.</li> <li>I have stopped using <code>this</code>. <a href="adsafe.org">ADSafe.org</a>. Removing <code>this</code> makes things much easier and safer. The problem with <code>this</code> is that it can be bound to the window object, which compromises security. DC’s solution is to make <code>this</code> illegal.</li> <li>I stopped using <code>null</code>. <code>null</code> and <code>undefined</code> are not the same. <code>undefined</code> is better because it’s the value that the language uses. Theres an error with typeof with <code>null</code>, which returns Object, which is wrong.</li> <li>I stopped using falsiness. To check if a value is undefined, I <code>value === undefined</code></li> </ul> <h3 id="loops-reconsidered">Loops Reconsidered</h3> <ul> <li>I don’t use <code>for</code>. I now use <code>array.forEach</code> and its many sisters.</li> <li>I don’t use <code>for in</code>. I now use <code>Object.keys(object).forEach</code>.</li> <li>With ES6, I will stop using <code>while</code> because we’ll have proper tail recursion call. No longer a penalty for running recursion.</li> </ul> <h3 id="the-next-language">The Next Language</h3> <ul> <li>If JS is the last language, that will be really sad.</li> <li>Programmers are as emotional and irrational as normal people. It took a generation to agree that high level languages were a good idea. I took a generation to agree that goto was a bad idea. It took a generation to agree that objects were a good idea. I took two generations to agree that landbas were a good idea.</li> <li>Once stuff gets in the brain wrong, it rarely gets fixed. So we need to wait a whole generation for it to die and then get a consensus on the good things.</li> <li>Things get discovered and only 20 years later, we move on.</li> </ul> <p>Systems languages / Application languages</p> <ul> <li>System languages - low level stuff. C. Go.</li> <li>Application languages - Everything else. We need more innovation in both sectors.</li> </ul> <p>Application languages</p> <ul> <li>Classical inheritance vs Prototypal inheritance. Most are class based Class. The Prototype has a lot of advantages over class.</li> <li>With classes, you need to build a classification taxonomy. It is built during the time when we have the least understanding of the system. So we invariably get it wrong. We then build the application with a broken hierarchy and taxonomy, which creates lots of friction. Now we have to rip things apart and get things right, and its scary. That doesn’t happen with prototypes.</li> </ul> <p>Prototype Inheritance - memory conservation - Object.create (shallow copy) vs Object.copy - Confusion: own vs inhertied. - Retroactive heredity. Using <code>__proto__.</code> - Performance inhibiting.</p> <p>JS is class free OOP, the best thing JS gave to the world.</p> <h3 id="how-dc-will-make-objects">How DC will make objects</h3> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">constructor</span> <span class="p">(</span><span class="nx">spec</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="p">{</span><span class="nx">member</span><span class="p">}</span> <span class="o">=</span> <span class="nx">spec</span><span class="p">,</span> <span class="p">{</span><span class="nx">other</span><span class="p">}</span> <span class="o">=</span> <span class="nx">other_constructor</span> <span class="p">(</span><span class="nx">spec</span><span class="p">),</span> <span class="c1">// For inhertiance</span> <span class="nx">method</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// member, other, mehtod, spec</span> <span class="p">};</span> <span class="k">return</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">freeze</span><span class="p">({</span> <span class="c1">//Freezing so that the object is immutable.</span> <span class="nx">method</span><span class="p">,</span> <span class="nx">other</span> <span class="c1">// All the other public methods</span> <span class="p">});</span> <span class="p">}</span></code></pre></div> <h3 id="kens-thoughts">Ken’s Thoughts</h3> <p>Seems like FP and immutability is a big theme across this conference and the JS community. Are we seeing the next paradigm shift?</p> <h2 id="what-the-javascript-kyle-simpson">What The… Javascript, Kyle Simpson</h2> <ul> <li>Sarte: “Hell is other people.”</li> <li>Devs: “hell is other people’s code”</li> <li>Kyle: “Hell is not understanding my own code.”</li> </ul> <p>Pulled out a lot of crazy and WTFs from Javascript - WAT video. WAT is nothing compared to what he found in the dark corners of the JS world. <a href="youdontknowjs.com">youdontknowjs.com</a></p> <p>Definition of WTF: not just funny, not a bug, not just ugly, not cross browser quirks, but inconsistent, incoherent, and unreasonable code that is part of the spec. Most WTFs come from the lack of understanding and the reasoning behind the WTF.</p> <p>Kyle is not bashing TC39, and usually is in the unconventional camp of defending JS. but today he will defect and hate on the language.</p> <p>Yes, there was a lot of swearing in this talk.</p> <h3 id="warmups">Warmups</h3> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Number</span><span class="p">.</span><span class="nx">MAX_VALUE</span> <span class="o">></span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// true;</span> <span class="nb">Number</span><span class="p">.</span><span class="nx">MIN_VALUE</span> <span class="o"><</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// false;</span></code></pre></div> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="mi">1</span> <span class="o"><</span> <span class="mi">2</span> <span class="o"><</span> <span class="mi">3</span> <span class="c1">// true</span> <span class="mi">3</span> <span class="o">></span> <span class="mi">2</span> <span class="o">></span> <span class="mi">1</span> <span class="c1">// false due to coercion</span></code></pre></div> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="mi">42</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// error</span> <span class="mi">42</span><span class="p">.</span> <span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// error</span> <span class="mi">42</span> <span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// "42.00"</span> <span class="mi">42</span> <span class="p">.</span> <span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// "42.00"</span> <span class="mi">42</span><span class="p">..</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// "42.00"</span></code></pre></div> <h3 id="coercion">Coercion</h3> <ul> <li>Kyle: Coercion… is awesome…! (He’s defending coercion here, not being sarcastic)</li> <li>If you read the spec, the above is rational because it follows the spec and makes sense.</li> <li>Javascript tries to do a best guess of what you were trying to do</li> </ul> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Not WTF because of coercion</span> <span class="p">[]</span> <span class="o">==</span> <span class="o">!</span><span class="p">[]</span> <span class="c1">// true</span> <span class="p">[]</span> <span class="o">+</span> <span class="p">{};</span> <span class="c1">// "[object Object]"</span> <span class="p">{}</span> <span class="o">+</span> <span class="p">[];</span> <span class="c1">// 0</span></code></pre></div> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Not WTF, but strageness due to historical reasons</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">""</span><span class="p">)</span> <span class="c1">// 0</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span> <span class="c1">// 0</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">"0"</span><span class="p">);</span> <span class="c1">// 0</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">"-0"</span><span class="p">);</span> <span class="c1">// -0</span> <span class="o">-</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// -0</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">"- 0"</span><span class="p">);</span> <span class="c1">// error because its not a valid sytax.</span></code></pre></div> <p>Again, this is according to spec.</p> <h3 id="now-for-crazy-coercion---wtfs">Now for crazy coercion - WTFs</h3> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Number</span><span class="p">(</span><span class="s2">"0."</span><span class="p">)</span> <span class="c1">// 0</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">".0"</span><span class="p">)</span> <span class="c1">// 0</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="c1">// NaN - WTF!</span> <span class="nb">Number</span><span class="p">(</span><span class="s2">"0O0"</span><span class="p">)</span> <span class="c1">// 0 - WTF</span></code></pre></div> <p>Different rules for undefined and null</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Number</span><span class="p">(</span><span class="kc">undefined</span><span class="p">)</span> <span class="c1">// NaN</span> <span class="nb">Number</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> <span class="c1">// 0</span></code></pre></div> <p>Strings</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">String</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span> <span class="c1">// "null"</span> <span class="nb">String</span><span class="p">([</span><span class="kc">null</span><span class="p">]);</span> <span class="c1">// "" - the null just goes away... Wtf!</span></code></pre></div> <p>Symbols in ES6</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">s</span> <span class="o">=</span> <span class="nx">Symbol</span><span class="p">(</span><span class="s2">"that's cool"</span><span class="p">);</span> <span class="nx">s</span><span class="p">;</span> <span class="c1">// Symbol (that's cool)</span> <span class="nb">String</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span> <span class="c1">// Symbol (that's cool)</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">""</span><span class="p">;</span> <span class="c1">// TypeError! Wasn't JS all about guessing what you wanted to do?</span></code></pre></div> <p>The WTF is that Javascript is inconsistent in how it treats WTFs. In most cases, it tries to guess, but in other cases it just throws an error.</p> <h3 id="switch-default-break">Switch default break</h3> <p>Specs say that <code>default</code> can be anywhere, but depending on where you put it, it can be WTF.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">switch</span><span class="p">(</span><span class="mi">42</span><span class="p">)</span> <span class="p">{</span> <span class="k">default</span><span class="o">:</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">""</span><span class="p">)</span> <span class="k">case</span> <span class="mi">10</span><span class="o">:</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"10"</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span> <span class="p">}</span></code></pre></div> <p>In the above case, it goes to the <code>default</code> case, but because it has no <code>break;</code>, it loops through all options again.</p> <h3 id="finally">Finally</h3> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">try</span> <span class="p">{</span> <span class="k">return</span> <span class="mi">2</span><span class="p">;</span> <span class="p">}</span> <span class="k">finally</span> <span class="p">{</span> <span class="k">return</span> <span class="mi">3</span><span class="p">;</span> <span class="p">}</span></code></pre></div> <p>The finally <code>return</code> overrides the <code>return</code> in the try. We lost 2!</p> <h3 id="temporal-dead-zone--tdz">Temporal Dead Zone. TDZ</h3> <p>TDZ: A variable can be in a special state.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span> <span class="k">typeof</span> <span class="nx">a</span><span class="p">;</span> <span class="c1">// undefined</span> <span class="k">typeof</span> <span class="nx">b</span><span class="p">;</span> <span class="c1">// TDZ error</span> <span class="kd">let</span> <span class="nx">b</span><span class="p">;</span> <span class="p">}</span></code></pre></div> <p>WTF because typeof should work with any kind of variable. Again, inconsistencies.</p> <h3 id="classes">“Class”es</h3> <p><code>super</code> is statically bound unlike <code>this</code>, which is dynamically bound. Using <code>super</code> doesn’t work with dynamicism which is what JS is all about. And so now we’re left in this weird state where we have both dynamic… and static… things and it’s a big WTF</p> <h3 id="key-take-away-2">Key Take Away</h3> <p>Javascript has its good parts, but there are bad WTFs that are inherent in the spec itself.</p> <p>WTF!</p> <p>TIL, <code>__proto__</code> is pronounced dunderproto!</p> </article> <article> <h1>Nap Time</h1> <p>2014-02-17T00:00:00-08:00</p> <h1 id="nap-time">Nap Time</h1> <p>Lilypad Arduinos are awesome because they are wearable. I bought one almost 8 months ago, but never ended up doing anything with it other than <a href="http://kenhirakawa.com/one-way-rf-communication-with-arduino-and-node/">build an RFDuino</a>. To give it its due diligence (and not have it collect dust), I decided to build a simple eye mask with a built-in alarm clock for power napping. After all, research has shown many times over that power naps can <a href="http://io9.com/the-science-behind-power-naps-and-why-theyre-so-damne-1401366016">boost productivity, creativity, well-being, learning, and much more</a>.</p> <figure> <figcaption>My poor job at sewing</figcaption> </figure> <p>Here’s how it works. Put on the eye mask, nap for 10 minutes, and let the mask vibrate to wake you up. It has a tri-color LED that will start pulsing while it’s on. To turn off the alarm, click the button board or simply turn off the Lilypad Arduino altogether. It’s dead simple, yet super effective.</p> <h2 id="i-want-one">I Want One</h2> <p>Here’s what you’ll need.</p> <ol> <li>Lilypad Arduino</li> <li>Lilypad Buzzer</li> <li>Lilypad Tri-color LED</li> <li>Lilypad Button Board</li> <li>LiPo Battery</li> <li>Conductive threads and a needle</li> <li>Nice, comfy eye mask</li> </ol> <p>You can get all items except the eye mask by purchasing a <a href="https://www.sparkfun.com/products/11261">ProtoSnap Development Kit</a>. The eye mask I purchased can be found on <a href="http://www.amazon.com/Dream-Zone--Earth-Therapeutics-Sleep/dp/B000JE2C9Y/ref=sr_1_3?ie=UTF8&qid=1383798238&sr=8-3&keywords=eyemask">Amazon</a>.</p> <p>Assuming you have your <a href="http://arduino.cc/en/Guide/HomePage#.UwKTLEJdUzF">Arduino development environment set</a>, the first thing you’ll want to do is install <a href="http://playground.arduino.cc/Code/Timer#Installation">Timer</a>. It’s a simple timing utility library that our code will use to keep track of time. Installation instructions can be found <a href="http://playground.arduino.cc/Code/Timer#Installation">here</a>.</p> <p>Next, grab the .ino source file from my <a href="https://github.com/khirakawa/power-napper/blob/master/src/nap.ino">github repo</a> and upload it to your Lilypad.</p> <p>Finally, wire your components using the schematic below. I recommend using banana clips first (don’t sew yet).</p> <figure> <figcaption>Schematic of Lilypad Arduino connected to a buzzer, tri-color LED, and a button</figcaption> </figure> <p>When you turn on your Lilypad you should immediately see the LED glow green. After 10 minutes the buzzer should start to vibrate.</p> <p>Once you know that it’s working, sew your components onto your eye mask. Make sure to keep the conductive thread from touching each other, or you’ll be left with a shorted circuit and a big, big frown.</p> <p>That’s it. Now go take a nap!</p> </article> <article> <h1>Selenium - Unable to add cookie to page</h1> <p>2013-10-04T00:00:00-07:00</p> <h1 id="selenium---unable-to-add-cookie-to-page">Selenium - Unable to add cookie to page</h1> <p>Selenium can be a pain in the butt sometimes. If you are having trouble running Selenium tests on IE9 because of an <code>Unable to add cookie to page</code> error, try the following:</p> <ol> <li>Go open Internet Explorer</li> <li>Open internet options</li> <li>Go to the Programs tab</li> <li>Amass all the courage you have to set IE as default browser</li> </ol> <p>That should hopefully fix it.</p> <p>The root cause is most likely related to this <a href="https://code.google.com/p/selenium/issues/detail?id=4307">closed bug</a>. Essentially, selenium looks for a registry key to determine if the page is in HTML. If it fails to find the registry key (for some reason), selenium will spit out the error above.</p> <p>Note, I’m running selenium server 2.32 with IEDriver 2.33.</p> <p>FWIW.</p> </article> <article> <h1>Load Disqus on localhost</h1> <p>2013-07-14T00:00:00-07:00</p> <h1 id="load-disqus-on-localhost">Load Disqus on localhost</h1> <p>Do you get a <code>We were unable to load Disqus</code> error when loading Disqus on localhost? The <a href="https://www.google.com/search?q=load+disqus+on+localhost">top Google results</a> will tell you that you need to enable the following flag in <code><head></code>:</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">disqus_developer</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// this would set it to developer mode</span></code></pre></div> <p>Unfortunately, I had no luck with such flag. I can’t find it in any of Disqus’s documentation either, so my bet is that the flag was deprecated.</p> <p>You can instead set the <code>disqus_url</code> config param to point to the correct site URL.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// jekyll syntax.</span> <span class="c1">// This evaluates to http://kenhirakawa.com/load-disqus-on-localhost</span> <span class="c1">// for this page</span> <span class="kd">var</span> <span class="nx">disqus_url</span> <span class="o">=</span> <span class="s1">'{{ site.url }}{{ page.url }}'</span><span class="p">;</span></code></pre></div> <p>Now when you load your site via localhost, Disqus will match the <code>disqus_url</code> param with your registered site URL. If they match, Disqus will load. If you leave the parameter undefined, the script will use <code>window.location.href</code> instead, which evaluates to ‘localhost’. Obviously, ‘localhost’ does not match your site URL, which explains why Disqus didn’t load on localhost in the first place.</p> <p>One more thing that made me trip was the website URL format under the Site Identity settings. I had it set to <code>http://www.kenhirakawa.com</code>, when it should have been just <code>http://kenhirakawa.com</code>. The syntax is documented <a href="http://help.disqus.com/customer/portal/articles/472007-i-m-receiving-the-message-%22we-were-unable-to-load-disqus-%22">here</a>, but I’d wish they’d just client-side validate the field.</p> <p>Hope this helps anyone having trouble loading Disqus on localhost!</p> </article> <article> <h1>One Way RF Communication with Arduino and Node</h1> <p>2013-06-29T00:00:00-07:00</p> <h1 id="one-way-rf-communication-with-arduino-and-node">One Way RF Communication with Arduino and Node</h1> <p><em>Here I will document how I put together a node controlled RF receiver and transmitter using relatively inexpensive RF parts and <a href="https://github.com/khirakawa/duino">a fork</a> of <a href="https://github.com/ecto/duino">ecto’s duino framework</a>.</em></p> <figure> <figcaption>Arduino UNO with WRL-10532 RF Link Receiver</figcaption> </figure> <p>For a recent side project, I needed to wirelessly send data from one Arduino to another, and have the receiver do some data processing via node. I ended up using a pair of Wenshing RF receivers / transmitters to do the wireless communication as they were inexpensive and easy to use. On the software side, I used a forked version of ecto’s duino framework to interface with the Arduinos and support RF communication. If you’re in need of building something similar, read on!</p> <h2 id="lets-build-it">Let’s Build It</h2> <p>First things first, I bought an <a href="https://www.sparkfun.com/products/10532">RF link receiver</a> and <a href="https://www.sparkfun.com/products/10534">transmitter</a> from SparkFun for a total cost of less than $10. Here’s the schematic drawing of the receiver I wired up.</p> <figure> <figcaption>WRL-10532 RF Link Receiver wired to data pin 2 of Arduino</figcaption> </figure> <p>Here’s the schematic of the transmitter. You can optionally attach a wire to the right-most pin to extend the antenna for more reliable transmission. Same goes for the receiver above.</p> <figure> <figcaption>WRL-10534 RF Link Transmitter wired to data pin 3 of Lilypad Arduino</figcaption> </figure> <h2 id="rfduino">[RF]Duino</h2> <p>For all my Arduino projects, I’ve been using ecto’s <a href="https://github.com/ecto/duino">duino framework</a>. It’s plain simple and easy to use. Unfortunately, it doesn’t support RF communication, so I decided to fork it and write my own <a href="https://github.com/khirakawa/duino">library</a>. This library supports both receiving and transmitting data via <code>RFReceiver</code> and <code>RFTransmitter</code> classes.</p> <p>The first thing you’ll want to do is install the framework as a node module to your project (assuming, you already have a node program created):</p> <p><code>npm install git://github.com/khirakawa/duino.git</code></p> <p>Note that this flavor of duino replaces the servo module with the RF modules, so if you’re looking to use both, my fork won’t do.</p> <p>Next, upload the framework’s Arduino sketch located at <code>node_modules/duino/src/du/du.ino</code> to your Arduino. The same sketch should be uploaded to both your receiver board and transmitter board. This program issues commands to the RF receiver / transmitter on behalf of your node app.</p> <p>That’s it! Preparation done.</p> <p>You can now transmit data by doing:</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">arduino</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'duino'</span><span class="p">),</span> <span class="nx">board</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">arduino</span><span class="p">.</span><span class="nx">Board</span><span class="p">();</span> <span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="kd">var</span> <span class="nx">rfTransmitter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">arduino</span><span class="p">.</span><span class="nx">RFTransmitter</span><span class="p">({</span> <span class="nx">board</span><span class="o">:</span> <span class="nx">board</span><span class="p">,</span> <span class="nx">pin</span><span class="o">:</span> <span class="s1">'03'</span> <span class="p">});</span> <span class="nx">rfTransmitter</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s2">"hey there delilah"</span><span class="p">);</span> <span class="p">});</span></code></pre></div> <p>And receive it with:</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">arduino</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'duino'</span><span class="p">),</span> <span class="nx">board</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">arduino</span><span class="p">.</span><span class="nx">Board</span><span class="p">();</span> <span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="kd">var</span> <span class="nx">rfReceiver</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">arduino</span><span class="p">.</span><span class="nx">RFReceiver</span><span class="p">({</span> <span class="nx">board</span><span class="o">:</span> <span class="nx">board</span><span class="p">,</span> <span class="nx">pin</span><span class="o">:</span> <span class="s1">'02'</span> <span class="p">});</span> <span class="nx">rfReceiver</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'read'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">data</span><span class="p">){</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"data"</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span> <span class="p">});</span> <span class="p">});</span></code></pre></div> <p>The library does impose a hard limit of 26 characters for a single transmission. If you need to send more, simply call <code>rfTransmitter.send</code> multiple times, sequentially. For more information on other available commands, consult ecto’s <a href="https://github.com/ecto/duino#libraries">documentation</a>.</p> <h2 id="next-steps">Next Steps</h2> <p>I had to remove the servo module from duino because the <code>Servo.h</code> include in the <code>du.ino</code> sketch conflicted with the <code>VirtualWire.h</code> library used for RF communication. Future versions will have this fixed.</p> <p>If you need an even cheaper, smaller, and more reliable wireless Arduino board, I would highly suggest purchasing an <a href="http://www.rfduino.com/shop.html">RFDuino</a> made by OpenSourceRF. It’s quite a remarkable piece technology and opens up a ton of new possibilities. I can’t wait for my RFDuino to arrive! Until then though, what I’ve outlined above will suffice =).</p> </article> <article> <h1>Working Memory</h1> <p>2013-05-07T00:00:00-07:00</p> <h1 id="working-memory">Working Memory</h1> <p><em>Research and Application of Working Memory and the Effects of Anxiety</em></p> <h2 id="the-working-memory-model">The Working Memory Model</h2> <p>Working memory failures happen relatively frequently for everyone <a href="#Schacter2001">[1]</a>. For example, people may forget their pin number they have created just moments ago for a bank account. More critically, nuclear plant operators may fail to follow critical procedures under life-threatening, emergency situations. Such incidents can be attributed to factors such as age, psychological stressors, and emotional anxiety that hinder working memory. It is crucial to understand the how working memory functions to better design interfaces that reduce cognitive load and tackle the limitations of working memory.</p> <p>Working memory is a limited-capacity system that maintains and stores information in the short term to support complex cognitive tasks such as learning, reasoning, and language comprehension. Baddeley’s model, working memory can be divided into four subsystems: the central executive, the visuospatial sketchpad, the phonological loop, and the episodic buffer <a href="#Baddeley2003">[2]</a>.</p> <h3 id="central-executive">Central Executive</h3> <p>Schneider and Detweiler suggest that the concurrent storage and processing is only one aspect of working memory; the prime function of working memory is the coordination and allocation of resources by the central executive <a href="#Schneider1988">[3]</a>. The central executive is responsible for focusing, dividing, and switching attention and resources to and from its slave subsystems, along with the need to bridge working memory with long-term memory <a href="#Baddeley2003">[2]</a>. Miyake et al proposes that the central executive fulfills three basic functions <a href="#Miyake2000">[4]</a>:</p> <ol> <li>Inhibition - “one’s ability to deliberately inhibit dominant, automatic, or prepotent responses when necessary” <a href="#Miyake2000">[4, P. 57]</a></li> <li>Shifting - rapid, seamless shifting between multiple, concurrent tasks, operations or mental sets</li> <li>Updating - refreshing and reconstructing working memory representations</li> </ol> <p>The two storage systems that the central executive coordinates information from is the visuospatial sketchpad and the phonological loop.</p> <h3 id="visuospatial-sketchpad">Visuospatial Sketchpad</h3> <p>The visuospatial sketchpad is important for many fields, such as architecture and engineering, where visuospatial imagery is key to success. Similarly, the visuospatial components of working memory have played a critical role in scientific discoveries, such as the discovery of the general theory of relativity by Einstein <a href="#Ghisilen1952">[5]</a>. The visuospatial sketchpad holds encoded, spatial information that is captured from the visual sensory system or retrieved from long-term memory to produce a recollection of an image <a href="#Wickens2004">[6, P. 129]</a>. For instance, architects may use their visuospatial sketchpad to create a mental synthesis of their design, and retain information regarding where each structural component is located.</p> <h3 id="phonological-loop">Phonological Loop</h3> <p>The phonological loop is most likely the simplest out of the quadripartite system and has been investigated most extensively <a href="#Baddeley1992">[7]</a>. This system has two components, a phonological store that stores acoustic or speech-based information for a brief period of time (1 to 2 seconds), and an articulatory control process. Its main functions are twofold. 1) It uses subvocal repetition to maintain information within the phonological store, and 2) it uses subvocalization to register visually presented materials in the phonological store. The phonological store plays a crucial role for long-term phonological learning, especially with acquiring foreign languages <a href="#Baddeley1992">[7]</a>. This subsystem is susceptible to a number of capacity and recall issues, including:</p> <p>•Acoustic similarity effect - recalling of ordered items is more difficult if the items are similar in sound. For instance, recalling “man, cap, can, map, mad” is more difficult than recalling “pit, day, cow, pen, rig” <a href="#Baddeley1992">[7, P. 558]</a>. Recalling is not affected by semantic similarities of items. •Word-length effect - longer words are more susceptible to recall failure because they take longer to rehearse. Generally, humans can remember about as many words as they can say in 2 seconds <a href="#Baddeley1992">[7, P. 558]</a>.</p> <h3 id="episodic-buffer">Episodic Buffer</h3> <p>The fourth subsystem of the working memory model is the episodic buffer and it is responsible for connecting working memory with long-term memory. The episodic buffer can be thought of as a temporary storage that acts as a global workspace for the central executive. Working memory retrieves information from long term memory by “downloading” the information into the episodic buffer, and proceeds to manipulate and create new representations of the information, rather than simply activating the nodes in the semantic network <a href="#Baddeley2003">[2]</a>. According to Baddeley, the episodic buffer is assumed to be accessible to conscious awareness, which then provides convenient bindings for different systems to integrate with working memory.</p> <h2 id="limitations-of-working-memory---capacity">Limitations of Working Memory - Capacity</h2> <p>In his seminal research, Miller has described the magical number of 7 plus or minus two chunks that represent the capacity limit of working memory <a href="#Miller1956">[8]</a>. Furthermore, Miller focused on the ability to effectively increase working memory capacity by intelligently “chunking” items together. According to Simon, chunks are a collection of items that have strong ties with each other, but weaker ties with other, concurrent chunks in working memory storage <a href="#Simon1974">[9]</a>. For example, the following 12 letter sequence “fbicbsibmirs” can be grouped into four chunks, FBI, CBS, IBM, and IRS. Later research and evidence suggest that the limit is substantially fewer, stating that 4 plus or minus 1 is the limit <a href="#Cowan2001">[10]</a>.</p> <p>The practical identification of chunks and forming of associations are dependent on the knowledge stored in long-term memory <a href="#Cowan2001">[10]</a>. During the process of chunking, related concepts within long-term memory are evoked and activated. Activated information is more readily accessible as well, and acts as a supplement to working memory in the form of the phonological buffer or the visuospatial sketchpad <a href="#Cowan2001">[10]</a>. Thus chunks “can be more than just a conglomeration of a few items from the stimulus” <a href="#Cowan2001">[10, P. 92]</a>. In fact, Gobet and Simon found that expert chess players compared to other chess players differ not in the quantity of chunks but in the size of these chunks <a href="#Gobet1996">[11]</a>.</p> <h3 id="duration">Duration</h3> <p>The capacity limits of working memory are closely tied to the time constraints of working memory. Information in working memory will be lost if the chunks are not periodically reactivated through the process of maintenance rehearsal. During this process, one continuously thinks of this item over and over and thereby refreshing the information in storage. For acoustic information, this rehearsal is in the form of a series of subvocal articulation that occurs in the phonological loop, and is subject to a number of factors that can impair rehearsal, including word-length effects and acoustic similarity effects. According to Card, Moran, and Newell the half-life of chunks is estimated to be approximately 70 seconds for one chunk and 7 seconds for three chunks <a href="#Card1986">[12]</a>.</p> <h3 id="attention">Attention</h3> <p>Working memory has a limited supply of attentional resources. Processing and maintaining information rely on the same pool of resources and no two concurrent tasks can be attended to simultaneously <a href="#Barrouillet2007">[13]</a>. If attention is fully consumed by a concurrent task, the strength of the unattended information will suffer from a time-based decay; a reactivation is necessary before the memory trace is completely lost. According to the time-based, resource-sharing model, “sharing of attention is achieved through a rapid and incessant switching of attention from processing to maintenance” <a href="#Barrouillet2004">[14, P. 571]</a>. High cognitive load is therefore the behavior in which tasks impede switching by continuously demanding attentional resources and preventing the central executive to perform executive functions such as maintenance rehearsals. On the other hand, cognitively less demanding tasks allow for frequent pauses and switching to other concurrent tasks <a href="#Barrouillet2007">[13]</a>.</p> <h2 id="the-effects-of-anxiety">The Effects of Anxiety</h2> <p>Anxiety can have a disruptive effect on working memory. Eysenck, Derakshan, and Santos define anxiety as an emotional and motivational state occurring in threatening situations, in which individuals are unable to instigate a clear behavioral pattern to remove the threat <a href="#Eysenck2007">[15]</a>. Individuals often try to develop strategies to reduce anxiety in order to achieve a certain goal, and are often times worried about the threat itself. Anxiety itself has adverse effects on the cognitive performance; in fact, the right amount of anxiety can boost performance, whereas any amount further will become detrimental to cognitive performance <a href="#Eysenck2007">[15]</a>.</p> <p>The processing efficiency theory was developed by Eysenck and Calvo to explain the effects of anxiety on cognitive performance effectiveness and efficiency <a href="#Eysenck1992">[16]</a>. According to the theory, worrisome thoughts impacts the central executive by consuming cognitive resources of working memory, leaving less available resources for other concurrent tasks. Any task that has substantial demand on working memory storage and processing will be most vulnerable to high performance impairments due to anxiety. Detrimental effects are also expected in the phonological loop because worry typically involves subvocal speech activity <a href="#Rapee1993">[17]</a>.</p> <p>Attentional control theory posits that anxiety disrupts the balance between two main types of attentional systems: a top-down, goal-driven system and a bottom-up stimulus driven system <a href="#Eysenck2007">[15]</a>. The top-down control of attentional system is influenced by metacognitive factors such as expectations and goals. The bottom-up system is involved in the bottom-up control of attention through the signal detection of sensory events, especially those that are salient or unexpected. Under stressful conditions when anxiety is high, the bottom-up, stimulus-driven system is given more weight in terms of influence. Anxiety affects the bottom-up system via automatic processing of threat-related stimuli, resulting in a decrease in the influence of its counterpart, goal-directed attentional system <a href="#Eysenck2007">[15]</a>. Attention is then shifted from task-relevant processes to task-irrelevant ones (e.g. threat related distractors, worrisome thoughts) and so impairs processing efficiency.</p> <p>Interestingly, there are a number of research studies that have shown high anxiety groups to outperform none to lower anxious groups <a href="#Byrne1995">[18]</a>. According to attentional control theory, the reason is because anxiety impairs efficiency more than performance effectiveness. Furthermore, worry can instigate motivation to lessen anxiety and potential performance impairments can be mitigated <a href="#Eysenck2007">[15]</a>.</p> <h2 id="case-study">Case Study</h2> <p>A website may go offline due to a denial-of-service attack. It is then the responsibility of system admins to detect the threat, locate the issue, and mitigate the attack. The first tool admins may use is an IT infrastructure-monitoring tool such as Nagios. From CPU usage statistics to network host summaries, Nagios provides all the necessary information for a system administrator. However, under cognitive load, system administrators may perform suboptimally due to anxiety and pressure.</p> <figure> <figcaption>Figure 1: Service status page of Nagios with four critical incidents</figcaption> </figure> <p>Nagios is designed so that any critical issues or warnings are fully apparent in the interface (figure 1). When a user first logs on, a popup is shown with the number of critical incidents that need to be attended to (figure 2). This gives a clear path of action for the admin that aligns well with the admin’s goal of removing the threat, and moreover putting the site back online. The admin can also consult the network status map to view the network topology diagram. This is helpful because it removes the need to mentally synthesize the network and its intricacies in the visuospatial sketchpad.</p> <figure> <figcaption>Figure 2: Notification of critical problems that popup immediately after login</figcaption> </figure> <p>During emergency situations, the anxiety and pressure would cause the attentional resources of the central executive to be consumed by task-irrelevant, distracting tasks, such as worrisome thoughts of losing customers and revenue. The phonological loop would be occupied with the same thoughts as well in the form of subvocal speech. Less time is spent with maintenance rehearsals, and therefore chunks in working memory, information that is crucial to diagnosing the problem, become more susceptible to loss and time-decay.</p> <p>A number of improvements can be made to the interface. During critical events, it is important to reduce memory load of the user and any methods to offload information in working memory is of value. Nagios can improve the interface by providing a textbox column in the service status table, in which the admin can take notes per incident. This removes the need for the admin to retain all diagnostic information in working memory. IP address comparisons under status information incurs cognitive load because of the need to sequence between each string. It is recommended to display a side-by-side comparison chart instead, similar to what programmatic diff-tools output (figure 3).</p> <figure> <figcaption>Figure 3: A side-by-side comparison chart for IP addresses that is less taxing on working memory</figcaption> </figure> <h2 id="conclusion">Conclusion</h2> <p>Working memory is the limited capacity system of the human brain that is acts as a cognitive workspace. It bridges the bottom-up sensory systems with top-down cognitive systems and interfaces with long-term memory. It is subject to various limitations and recall issues, including limitations of capacity, duration, and attentional resources. Designers should leverage this knowledge to design interfaces that reduce cognitive load and tackle the limitations of working memory.</p> <h2 id="references">References</h2> <ol class="bibliography"><li><span id="Schacter2001">[1]D. L. Schacter, <i>The Seven Sins of Memory</i>. 2001.</span></li> <li><span id="Baddeley2003">[2]A. Baddeley, “Working memory: looking back and looking forward.,” <i>Nature reviews. Neuroscience</i>, vol. 4, no. 10, pp. 829–39, Oct. 2003.</span></li> <li><span id="Schneider1988">[3]W. Schneider and M. Detweiler, “A Connectionist / Control Architecture for Working Memory,” <i>\ldots OF LEARNING&MOTIVATION: V21</i>, 1988.</span></li> <li><span id="Miyake2000">[4]a Miyake, N. P. Friedman, M. J. Emerson, a H. Witzki, a Howerter, and T. D. Wager, “The unity and diversity of executive functions and their contributions to complex ‘Frontal Lobe’ tasks: a latent variable analysis.,” <i>Cognitive psychology</i>, vol. 41, no. 1, pp. 49–100, Aug. 2000.</span></li> <li><span id="Ghisilen1952">[5]B. Ghisilen, <i>The Creative Process</i>. 1952.</span></li> <li><span id="Wickens2004">[6]C. D. Wickens, <i>An Introduction To Human Factors Engineering</i>, Second Edi. Upper Saddle River, NJ: Pearson Education, Inc., 2004, p. 587.</span></li> <li><span id="Baddeley1992">[7]A. Baddeley, “Working Memory,” <i>Science</i>, 1992.</span></li> <li><span id="Miller1956">[8]G. Miller, “The magical number seven, plus or minus two: some limits on our capacity for processing information,” <i>The psychological review</i>, 1956.</span></li> <li><span id="Simon1974">[9]H. A. Simon, “How big is a chunk,” <i>Science</i>, 1974.</span></li> <li><span id="Cowan2001">[10]N. Cowan, “The magical number 4 in short-term memory: a reconsideration of mental storage capacity.,” <i>The Behavioral and brain sciences</i>, vol. 24, no. 1, pp. 87–114; discussion 114–85, Feb. 2001.</span></li> <li><span id="Gobet1996">[11]F. Gobet and H. A. Simon, “Templates in Chess Memory: A Mechanism for Recalling Several Boards,” 1996.</span></li> <li><span id="Card1986">[12]S. Card, T. Moran, and A. Newell, “The model human processor,” <i>Ariel</i>, 1986.</span></li> <li><span id="Barrouillet2007">[13]P. Barrouillet, S. Bernardin, S. Portrat, E. Vergauwe, and V. Camos, “Time and cognitive load in working memory.,” <i>Journal of experimental psychology. Learning, memory, and cognition</i>, vol. 33, no. 3, pp. 570–85, May 2007.</span></li> <li><span id="Barrouillet2004">[14]P. Barrouillet, S. Bernardin, and V. Camos, “Time constraints and resource sharing in adults’ working memory spans.,” <i>Journal of experimental psychology. General</i>, vol. 133, no. 1, pp. 83–100, Mar. 2004.</span></li> <li><span id="Eysenck2007">[15]M. W. Eysenck, N. Derakshan, R. Santos, and M. G. Calvo, “Anxiety and cognitive performance: attentional control theory.,” <i>Emotion</i>, vol. 7, no. 2, pp. 336–353, 2007.</span></li> <li><span id="Eysenck1992">[16]M. W. Eysenck and M. G. Calvo, “Anxiety and performance: The processing efficiency theory,” <i>Cognition & Emotion</i>, vol. 6, no. 6, pp. 409–434, 1992.</span></li> <li><span id="Rapee1993">[17]R. M. Rapee, “The utilization of working memory by worry,” <i>Behaviour Research and Therapy</i>, vol. 31, pp. 617–620, 1993.</span></li> <li><span id="Byrne1995">[18]A. Byrne and M. W. Eysenck, “Trait anxiety, anxious mood, and threat detection,” <i>Cognition & Emotion</i>, vol. 9, no. 6, pp. 549–562, 1995.</span></li></ol> </article> <article> <h1>Metacognition</h1> <p>2013-04-16T00:00:00-07:00</p> <h1 id="metacognition">Metacognition</h1> <p><em>Research and Application of Metacognition and Decision Making</em></p> <h2 id="what-is-metacognition">What is Metacognition?</h2> <p>Metacognition refers to the second-order cognition of the mind; thoughts about thoughts, knowledge about knowledge, and self-reflection of abilities are all within the realm of metacognition. Flavell defines metacognition as the “knowledge that takes as its object or regulates any aspect of any cognitive endeavor” <a href="#Flavell1978">[1, P. 8]</a>.</p> <p>Metacognition plays a critical role for humans because of its usefulness and adaptiveness <a href="#Papleontiou-louca2003">[2]</a>. In fact, according to Flavell, humans have characteristics that make metacognition a necessity <a href="#Flavell1987">[3]</a>. For example, people are error prone and fallible, thus careful monitoring, regulation, and assessment is in constant need. Survival instincts require humans to plan ahead and make decisions based on critical evaluation of alternative choices. In order to make such decisions, metacognitive skills are required. Finally, human beings are conscious organisms that can think about and communicate psychological events. The act of thinking and explaining such events is in itself a metacognitive engagement.</p> <p>In his seminal research in cognitive development theory of children, Flavell defined the term metacognitive knowledge and metacognitive experience <a href="#Flavell1979">[4]</a>. Metacognitive knowledge is knowledge stored in long-term memory that refers to “people as cognitive creatures with their diverse cognitive tasks, goals, actions, and experiences” <a href="#Flavell1979">[4, P. 906]</a>. It involves the knowledge of one’s own cognition. Metacognitive experiences are realization of certain momentary experiences. It can vary in length of duration, level of consciousness, and complexity. The sudden, anxious feeling that one may encounter after realizing one does not understand an exam’s material, is an example of a metacognitive experience. Such phenomena are likely to happen when there is high, concentrated thinking and feelings <a href="#Flavell1979">[4]</a>.</p> <p>Metacognitive experiences can have important effects on cognitive goals, tasks, strategies and metacognitive knowledge. Experiences can add, delete, or revise metacognitive knowledge; similar to how new information is assimilated and accommodated into long-term memory <a href="#Piaget1962">[5]</a>. Experiences such as puzzlement and frustration can also lead to a re-establishment of new goals and revision of previous plans. Furthermore, they can activate cognitive or metacognitive strategies. For instance, the act of self-testing oneself with questions and noting how well they were answered is a metacognitive strategy aimed at the metacognitive goal of assessing knowledge.</p> <p>Efklides added a third phenomenon of metacognition called metacognitive skills <a href="#Efklides2006">[6]</a>. Metacognitive skills are conscious orchestration of mental processes to plan, monitor progress, allocate attentive resources, and regulate cognition and strategy use. Researchers such as Flavell, Butler and Winne argue that individuals who can accurately self manage and regulate are the most successful at learning because they can utilize the right set of tools to achieve goals and modify strategies based on awareness of effectiveness <a href="#Flavell1979">[4], [7]</a>.</p> <h2 id="decision-making">Decision Making</h2> <p>Decision making is a complex, dynamic process that requires metacognition. Zeleny and Cochrane defines it as “a complex search for information full of detours, enriched by feedback from casting about in all directions”, where one must constantly gather and discard information under fluctuating uncertainty <a href="#Zeleny1982">[8, P. 86]</a>.</p> <p>Utility theory states that under ideal circumstances, the economic man will choose the option that provides the greatest pleasure and utility <a href="#Edwards1954">[9]</a>. This theory assumes three characteristics of the decision maker: the individual 1) has complete information, 2) has infinite sensitivity, and 3) is completely rational. The decision making then becomes a process of obtaining an adequate measurement of attractiveness for each alternative and choosing the one with the highest merit.</p> <p>These characteristics are of course, unrealistic and false. Humans rarely have complete information, and so under uncertainty, decision making becomes a problem of heuristics. Humans are also irrational creatures and are easily influenced by biases such as the framing effect. Furthermore, humans lack the cognitive resources to optimize in a practical manner due to limitations of working memory, information, and computational facilities <a href="#Simon1955">[10]</a>. According to Schwartz et al, people who attempt to maximize utility tend to experience less happiness, optimism, and satisfaction <a href="#Schwartz2002">[11]</a>. Maximizers also tend to rely on external sources for information, increasing dependency and leading to procrastination of choice <a href="#Iyengar2006">[12]</a>.</p> <p>Instead of maximizing, there is a tendency for humans to satisfice, or select what is “good enough”. Simon defines satisficing as “decision making that sets an aspiration level, searches until an alternative is found that is satisfactory by the aspiration level criterion, and selects that alternative” <a href="#Simon1956">[13, P. 168]</a>. For example, a group may decide on a suboptimal plan, not because it offers the most utility, but because it was the first plan that was unanimously agreed upon.</p> <h2 id="the-process-of-decision-making">The Process of Decision Making</h2> <p>Zeleny and Cochrane describe utility theory as an outcome-oriented model of decision making <a href="#Zeleny1982">[8]</a>. Under circumstances of uncertainty however, decision making is more complex and is better modeled by a process-oriented approach. Decision making happens in three stages: pre-decision, decision, and post decision.</p> <h3 id="pre-decision-stage">Pre-decision Stage</h3> <p>A decision making process is initialized by a sense of conflict <a href="#Zeleny1982">[8]</a>. This conflict arises from the lack of suitable alternatives and the infeasibility of the ideal alternative. The decision maker’s goal is to resolve the pre-decision conflict either by finding the ideal (rare), or by choosing amongst a set of alternatives. Information that further separates and distinguishes choices are gathered in an objective fashion. This stage is also iterative with continuous reinterpretations and reassessments. Once alternatives are sufficiently divergent, a decision can be made.</p> <h3 id="decision-stage">Decision Stage</h3> <p>As the individual gets closer to finalizing a decision, alternatives that are further away from the ideal choices are discarded, and partial decisions are made. When alternatives are discarded, a re-evaluation of remaining choices ensues. Priority order may change, displacing the ideal choice with an alternative closer to the feasible set <a href="#Zeleny1982">[8]</a>. For instance, after an exhaustive search for an unrealistic deal for a car that is priced significantly lower than the MSRP, the individual may discard the ideal for a more feasible choice that is valued at standard pricing. Partial decisions are also important to make because it reduces the initial conflict. When the final decision is made, the initial pre-decision conflict is fully resolved.</p> <h3 id="post-decision-stage">Post-decision Stage</h3> <p>Even when the final decision unfolds, a sense of post-decision dissonance may ensue <a href="#Zeleny1982">[8]</a>. Regret is likely to manifest as well, especially when a decision is made between two equally attractive, but not identical alternatives. This is because the ideal alternative has been displaced by a feasible, but less attractive option. In order to counteract this, a bias will arise toward the decision made. Humans will seek consonant information that conforms to their decision to increase confidence <a href="#Zeleny1982">[8]</a>.</p> <p>It is important to note that during any stage of the decision making process, cognitive load for the individual can be high. This is especially the case if the decision needs to be made in a short period of time. Edland and Svenson reported that under workload overload, input selectivity becomes high, accuracy decreases, and strategies become less diverse <a href="#Edland1993">[14]</a>. It is recommended that designers make information available, interpretable, and salient for the most objectively important tasks. For instance, visualizing options for different laptop models in a chart format will help lower cognitive load because all the information is externalized and does not need to be stored in working memory. Even relieving small amounts of cognitive load by automating tasks can be a sufficient remedial measure <a href="#Wickens2004">[15]</a>.</p> <h2 id="irrational-behavior-and-bias">Irrational Behavior and Bias</h2> <p>Individuals do not always make rational, consistent decisions across tasks and situations. Research has shown that individual differences can affect decision making, including those of risk aversion and risk judgments, and decision making competence <a href="#Parker2007">[16]</a>.</p> <p>Decision making can be influenced by emotions. Shiv and Fedorikhin found that when consumers do not allocate resources to decision making, the consumer is more likely to decide based on affect rather than cognition <a href="#Shiv1999">[17]</a>. For instance, given a binary choice of chocolate cake or fruit salad, consumers will have a higher chance of selecting chocolate cake when decision is based mainly on affect. This also suggests consumers whose cognitive processes are constrained are more likely to impulse buy.</p> <h2 id="framing">Framing</h2> <p>Decision problems can be formulated in multiple ways, and often times the framing of the problem itself can sway the preferences in choice. This is known as the framing effect and occurs when two “logically equivalent (but not transparently equivalent) statements of a problem lead decision makers to choose different options” <a href="#Rabin1998">[18, P. 36]</a>. For example, an economic program that results in 90% employment gains public support, yet if the same program states it results in 10% unemployment, opposition rises <a href="#Druckman2001">[19]</a>. Generally, individuals tend to prefer risk-aversion when the problem is framed in a positive manner (gain), but shift to risk taking when the alternatives involve loss <a href="#Tversky1981">[20]</a>. Duckman argues however, that framing effects can be diminished with the availability of credible advice <a href="#Druckman2001">[19]</a>. Framing effects can also happen with outcomes; prospect theory states that a loss is more significant than an equivalent gain.</p> <h2 id="expert-decision-makers">Expert Decision Makers</h2> <p>Proficient decision makers are able to consult and exploit past experiences to handle uncertainty and novelty. According to Cohen’s R/M model, they undergo a process called meta-recognition <a href="#Cohen1998">[21]</a>. During the meta-recognition process, a gap is found during assessment and a skilled decision maker will patch the flaw or weakness that is found. These weaknesses can be a discovery of incompleteness, conflict, or unreliability <a href="#Cohen1986">[22]</a>. Correction occurs by an external action, attention shifting, and/or assumption revision. These actions are meant to stimulate retrieval of new, potentially relevant information either from an external source, or from long-term memory. They will then reevaluate the results and continually test the current state of comprehension. Various strategies, such as a quick test, are adopted to fill in the gap of understanding and inconsistency in knowledge. This meta-recognitional skill is analogous to meta-comprehension skills in proficient readers <a href="#Baker1985">[23]</a>.</p> <h2 id="case-study">Case Study</h2> <p>Flight Control is a mobile strategy game where the objective is to land as many aircrafts to their landing zones while avoiding mid-air collisions. The game has numerous characteristics that differentiate it from a more static strategic game such as chess. The positions and timings from which flights appear are unknown. As time progresses, more flights emerge with variations in speed and size. Such dynamic characteristics of this game make it impractical to take normative, object-oriented approaches. To deal with such uncertainties, a player must use metacognition to monitor performance and generate winning strategies.</p> <figure> <figcaption>Figure 1: Screenshots of Flight Control. White lines signify path of flight. Red circles indicate potential crashes.</figcaption> </figure> <p>During the early stages of the game, it is easy to compute the optimum path from a flight’s current position to its landing zone. The player’s initial strategy may be to simply draw a linear line between the flight and the target. However, as more flights enter the field, it becomes cognitively taxing to monitor all flights simultaneously. Not only does the player need to keep track of the position of the flight, but also the direction and the speed at which it is flying relative to other flights in the field of vision. Deciding on a path to draw becomes more complex than to draw a linear line. It is at this point that the player realizes that with the current strategy, a crash is inevitable. Such metacognitive experiences push the player to reassess and switch strategies.</p> <figure> <figcaption>Figure 2: A situation where a simple strategy will not suffice.</figcaption> </figure> <p>A novice player may simply “stick with” the path that was first drawn because it satisfices the goal at a satisfactory level. However, this is prone to crash threats appearing at unforeseeable time as the game progresses. Expert players on the other hand, are able to plan ahead by making decisions based on past experience and heuristics. For instance, they may have learned to recognize spots on the field in which collisions are more likely to happen and avoid such areas.</p> <p>As more flights emerge, cognitive load is put on the user and game difficulty increases. This is obviously intentional to make the game challenging. However, if this were to hypothetically be an actual flight control program, cognitive load and dissonance are components that are to be avoided at all costs. Certain designs can be made to the program to help the flight controller, such as visually displaying locations where collisions are guaranteed to happen, given the current set of flights and paths drawn. In fact, the entire program could be automated, relieving the user from heavy mental computational work.</p> <h2 id="conclusion">Conclusion</h2> <p>Metacognition plays a critical role for humans. As error-prone organisms with survival instincts, humans must make use of metacognition to monitor progress, assess and revisit strategies, and make decisions based on critical evaluation of alternative choices. Decision making is a complex process of selecting the option closest to the ideal. During the this progress, the individual may undergo heavy cognitive load, and it is important for the designer to externalize as much information to prevent workload overload.</p> <h2 id="references">References</h2> <ol class="bibliography"><li><span id="Flavell1978">[1]J. H. Flavell, “Metacognitive Development,” <i>Structural/Process Theories of Complex Human Behavior</i>, pp. 34–78, 1978.</span></li> <li><span id="Papleontiou-louca2003">[2]E. Papleontiou-louca, “The concept and instruction of metacognition,” <i>Teacher Development</i>, vol. 7, no. 1, pp. 9–30, 2003.</span></li> <li><span id="Flavell1987">[3]J. H. Flavell, “Speculations about the Nature and Development of Metacognition,” <i>Metacognition, Motivation and Understanding</i>, 1987.</span></li> <li><span id="Flavell1979">[4]J. H. Flavell, “Metacognition and cognitive monitoring: A new area of cognitive-developmental inquiry.,” <i>American Psychologist</i>, vol. 34, no. 10, pp. 906–911, 1979.</span></li> <li><span id="Piaget1962">[5]J. Piaget, <i>Play, dreams and imitation</i>. 1962.</span></li> <li><span id="Efklides2006">[6]A. Efklides, “Metacognition and affect: What can metacognitive experiences tell us about the learning process?,” <i>Educational Research Review</i>, vol. 1, no. 1, pp. 3–14, Jan. 2006.</span></li> <li><span id="Butler1995">[7]D. L. Butler and P. H. Winne, “Feedback and Self-regulated Learning; a theoretical synthesis,” <i>Review of Educational Research</i>, vol. 65, pp. 245–281, 1995.</span></li> <li><span id="Zeleny1982">[8]M. Zeleny and J. L. Cochrane, <i>Multiple Criteria Decision Making</i>. 1982.</span></li> <li><span id="Edwards1954">[9]W. Edwards, “THE THEORY OF DECISION MAKING,” <i>Psychological bulletin</i>, vol. 51, no. 4, pp. 380–417, 1954.</span></li> <li><span id="Simon1955">[10]H. A. Simon, “A Behavioral Model of Rational Choice,” <i>The quarterly journal of economics</i>, vol. 69, no. 1, pp. 99–118, 1955.</span></li> <li><span id="Schwartz2002">[11]B. Schwartz, A. Ward, J. Monterosso, S. Lyubomirsky, K. White, and D. R. Lehman, “Maximizing versus satisficing. Happiness is a matter of choice.,” <i>Journal of Personality and Social Psychology</i>, vol. 83, pp. 1178–1197, 2002.</span></li> <li><span id="Iyengar2006">[12]S. S. Iyengar, R. E. Wells, and B. Schwartz, “Doing Better but Feeling Worse Looking for the ‘Best’ Job Undermines Satisfaction,” <i>Psychological Science</i>, vol. 17, no. 2, pp. 143–150, 2006.</span></li> <li><span id="Simon1956">[13]H. A. Simon, “Rational Choice and the Structure of the Environment,” <i>Psychological review</i>, vol. 63, no. 2, pp. 129–138, 1956.</span></li> <li><span id="Edland1993">[14]A. Edland and O. Svenson, “Judgment and decision making under time pressure,” <i>Time pressure and stress in human judgment and decision making</i>, pp. 27–40, 1993.</span></li> <li><span id="Wickens2004">[15]C. D. Wickens, <i>An Introduction To Human Factors Engineering</i>, Second Edi. Upper Saddle River, NJ: Pearson Education, Inc., 2004, p. 587.</span></li> <li><span id="Parker2007">[16]A. M. Parker, “Maximizers versus satisficers: Decision-making styles, competence, and outcomes,” <i>\ldots and Decision Making</i>, vol. 2, no. 6, pp. 342–350, 2007.</span></li> <li><span id="Shiv1999">[17]B. Shiv and A. Fedorikhin, “Heart and Mind in Conflict : The Interplay of Affect and Cognition in Consumer Decision making,” <i>Journal of Consumer research</i>, vol. 26, no. 3, pp. 278–292, 1999.</span></li> <li><span id="Rabin1998">[18]M. Rabin, “Psychology and Economics,” <i>Journal of Economic Literature</i>, pp. 11–46, 1998.</span></li> <li><span id="Druckman2001">[19]J. N. Druckman, “Using Credible Advice to Overcome Framing Effects,” <i>Journal of Law, Economics, and Organization</i>, vol. 17, no. 1, pp. 62–82, Apr. 2001.</span></li> <li><span id="Tversky1981">[20]A. Tversky and D. Kahneman, “The Framing of Decision and the Psychology of Choice,” <i>Science</i>, 1981.</span></li> <li><span id="Cohen1998">[21]M. S. Cohen, J. T. Freeman, and B. Thompson, “Critical Thinking Skills in Tactical Decision Making: A Model and A Training Strategy,” <i>\ldots individual and team training</i>, 1998.</span></li> <li><span id="Cohen1986">[22]M. S. Cohen, “An expert system framework for non-monotic reasoning about probabilistic assumptions.,” <i>Uncertainty in artificial intelligence</i>, pp. 279–293, 1986.</span></li> <li><span id="Baker1985">[23]L. Baker, “How do we know when we don’t understand? Standards for evaluating text comprehension,” <i>Metacognition, cognition, and human performance</i>, vol. 1, pp. 155–205, 1985.</span></li></ol> </article> <article> <h1>Prior Knowledge</h1> <p>2013-04-02T00:00:00-07:00</p> <h1 id="prior-knowledge">Prior Knowledge</h1> <p><em>Research and Application of Schemas, Semantic Networks, and Affordances</em></p> <h2 id="what-is-prior-knowledge">What is Prior Knowledge</h2> <p>Prior knowledge plays a critical role in human cognitive tasks. When information is perceived from sensory inputs, top-down processing aids the brain in attaching meaning to what is sensed. Prior knowledge is stored in long-term memory and guides the mind to a course of action. Past experiences also aid in processing and understanding signals that are too weak or degraded to be efficiently perceived, such as the classic example of a doctor’s handwriting. Although words may be illegible, expectations of sentence structure and vocabulary allow the top-down cognitive process to guess the word and “fill in the blank” correctly. These expectations are based on how frequent humans encountered the event in the past and the context in which the stimulus was perceived <a href="#Wickens2004">[1, P. 125]</a>.</p> <p>Psychologists have developed numerous theories that model how knowledge is structured and organized in long-term memory. These include schema theory and semantic networks. This paper will review the research literature behind the models, discuss the effect of prior knowledge on human factor design, and apply the research to a case study.</p> <h2 id="schema-theory">Schema Theory</h2> <p>The information stored in long-term memory is actively organized around central concepts known as schemas. Schemas are built from the interaction with the environment to organize experience and are mental representations of objects, events, or people <a href="#Arbib1992">[2]</a>. When an external stimulus is perceived, humans try to make sense of the input in terms of stock schemas stored in long term memory. This process of linking incoming information with prior knowledge is called assimilation <a href="#Piaget1962">[3]</a>.</p> <p>Assimilation is one aspect of the learning process. Piaget suggests that learning is guided by the organization of schemas and the adaptation of schemas, which include the “assimilation of new information into existing schemas, or the accommodation of schemas to new information, which may not fit into existing schemas” <a href="#596-Chalmers2003">[4]</a>. Thus, a schema can change over time as needed. Knowledge is also linked to an action schema, and usually entails the expectation of particular responses. In Schmidt’s term, this is called a recall schema and is defined as the schema in which motor movements are mapped with the actual outcomes <a href="#Schmidt1976">[5]</a>. In a similar sense, the act of recalling a story is done by relating the experience to one’s set of familiar schemas rather than from rote memorization of details <a href="#Arbib1992">[2]</a>.</p> <p>What pushes learning is what Piaget describes as Equilibration. Equilibration is the force that drives cognitive development. When new information is captured through sensory inputs, but cannot be assimilated into the stock schemas in our long-term memory, equilibration forces the learning process to mold current schemas to accommodate the new information and bring balance <a href="#Piaget1978">[6]</a>. When there is a one to one mapping between new material and stock schemas, it is said to be intuitive. On the other hand, if the effort of accommodation is substantial, rejection can occur. Thus designers are recommended to avoid applying design patterns that make accommodation difficult.</p> <h2 id="semantic-networks">Semantic Networks</h2> <p>The larger collection of interrelated schemas is called a semantic network <a href="#Rumelhart1976">[7]</a>. Each schema stored in long-term memory can be thought of as a node in a network. Related nodes are connected by links and a connection between two nodes denotes an association of information. Collins and Quillian first suggested that a semantic network was structured in a tree-structured hierarchy, with “connections determined by class-inclusion relations” <a href="#Collins1969">[8]</a>. Although economical, this type of structure is severely limited because it can only deal with inheritance-based categorization of typical objects <a href="#Steyvers2005">[9]</a>.</p> <p>Instead of the tree-structure, typical textbooks and later research show a network with an arbitrary set of nodes and connections with no structure. A node, or concept is defined by what it is connected to. According to researchers, this seemingly arbitrary network structure exhibits certain characteristics. Similar to other natural networks, semantic networks possess 1) a small-world structure arising from a 2) scale-free organization. In other words, nodes are organized into neighborhoods, hubs, and the distance between two seemingly unrelated nodes is short on average <a href="#Steyvers2005">[9]</a>.</p> <p>During a recall of information, certain nodes are activated. Activation in one node can trigger the activation of other nodes connected along network links. Anderson and Pirolli call this spreading activation <a href="#Anderson1984">[10]</a>. Spreading occurs near instantaneously, but the activation strength will decay exponentially with distance. Theories such as ACTE and ACT* are just some of the theories that model spreading activation.</p> <p>Certain characteristics determine how well prior knowledge is recalled from long-term memory. One characteristic is strength. Strength is determined by how recently information was used, as well as how frequently the node was activated. Frequency is directly proportionate to the number of links connected. The more connections, the greater the chances are of activation, and therefore a likely increase in strength. This is because “activations converging on a node from multiple sources will sum” <a href="#Anderson1984">[10, P. 794]</a>. In other words, memory retrieval will often fail due to weak strength, weak or few associations with other information, and or presence of interfering associations.</p> <h2 id="priming">Priming</h2> <p>The notion of activation is also tied to the effect of priming. Priming is the “facilitated identification of perceptual objects from reduced cues as a consequence of a specific prior exposure to an object” <a href="#244-Schacter1992">[11]</a>. In terms of semantic networks, prior activation of nodes enhances the ability to process subsequent stimuli in a certain fashion related to the activated neighborhood. Humans tend to see things related to the priming stimuli. For instance, when humans enter a kitchen, the “kitchen” schema is brought forth and nodes linked to it, such as “furniture” and “sink”, are activated with a high probability. Thus we expect to find objects such as a dining table or a refrigerator in a kitchen instead of unrelated objects such as a motor vehicle. Ratcliff and McKoon found that as the network distance between the prime and the target decreased, the facilitative effect of a prime on target recognition increased <a href="#Ratcliff1981">[12]</a>. In fact, the effect of priming decays exponentially as a function of distance <a href="#Anderson1983">[13]</a>.</p> <p>Priming effects can occur in individuals who have brain damage. This leads to show that priming is separate from the brain mechanism responsible for recollecting past, episodic memory. Such is the case for amnesic patients who can demonstrate effects of priming after encountering certain words or objects <a href="#Schacter1992">[11]</a>. Priming can also occur without consciousness and operates at a pre-semantic level of processing that does not involve access to the meanings of words or objects <a href="#Schacter1992">[11]</a>.</p> <p>Priming is an effective tool for human factors design. Designers can take advantage of the effect to influence user behavior and thought process. For example, the designer may opt to use the word “patients” instead of “customers” in a dental software program to predispose the secretary to think in a care giving, and not a business, perspective. However, if the incorrect schema is instantiated through priming, misunderstanding and confusion can ensue. Such is the case with the Stroop effect <a href="#MacLeod1991">[14]</a>.</p> <h2 id="metaphors">Metaphors</h2> <p>Many psychologists have suggested that metaphors play a special role in how humans organize conceptual knowledge. Metaphor-based schema is “the representational structure that maps knowledge about a conceptual metaphor’s vehicle domain onto its topic domain” <a href="#McKoon1980">[15, P. 613]</a>. It can be thought as a memory aid for learning new knowledge through the interaction of two different domains. Gibbs suggests that metaphoric expressions are constructed from available cognitive mappings stored in long-term memory <a href="#Gibbs1992">[16]</a>.</p> <p>Metaphors are a common tool used in interface design. A classic example is the metaphor of desktops used in operating system GUIs. Virtual files on the desktop can be placed into folders to organize and categorize, just as physical paperwork can be organized in file cabinets. Other metaphorical examples found in software design include magnifying glasses to represent zoom or search, trash icons for delete, and national flag icons for language selection.</p> <h2 id="affordance">Affordance</h2> <p>When a metaphor is applied to an object, it is said that the metaphor brings with it, a set of affordances. Affordances are inherent properties of an object that allows an actor to perform an action. For example, a knob on a door affords ‘twistability’ and the door affords ‘openability’. According to Gibson, affordances are independent of the user’s ability to perceive the properties <a href="#Gibson1977">[17]</a>. Affordances are also relative to the capabilities of the user. For instance, a staircase affords ‘climbability’ to an adult, but not to a toddler who is not tall enough to reach the first step.</p> <p>In contrast to Gibson’s view, Norman’s definition of affordance is defined in terms of both real and perceived affordances. According to Norman, an affordance suggests a strong cue to its operation. Thus when both real and perceived are linked, affordance emerges and the user knows how to use the object without labels or explanation <a href="#Norman1999">[18]</a>. In terms of Norman’s view, a hidden door would not have an affordance of ‘openability’ because the user does not perceive the existence of the door. Affordance is therefore dependent on the experience, culture, and prior knowledge of the actor.</p> <p>The two different definitions of affordance have caused confusion in the HCI community <a href="#McGrenere2000">[19]</a>. Realizing that the ambiguity of the term would further spread the misuse, McGrenere and Ho have further solidified the concept of affordance by extending Gibson’s definition. One such clarification is that affordances do not always map one to one to system functions because affordances are often nested within other properties. For example, the ‘margin adjustability’ of a text editor is within the parent affordance of ‘document editiability’. This aligns with Gaver’s research on nested and sequential affordances <a href="#Gaver1991">[20]</a>.</p> <p>Gibson states that affordance is binary; the property either exists, or doesn’t. Warren however, demonstrated that there is in fact, an optimal point in which the user can act upon the affordance with ease <a href="#Warren1984">[21]</a>. His experiment with stair ‘climbability’ showed that people’s visually guided judgments of ‘climbability’ accurately reflected a U-shaped function relating work to riser height and leg length (π=R/L). Affordances are therefore not binary, as Gibson suggests. Instead, there is a difficulty range for the affordance. Designers should strive to design elements that achieve the optimal point, π_optimal.</p> <h2 id="application-of-research">Application of Research</h2> <p>Tesla.com’s “Go Electric” is a section that aims to answer frequently asked questions in an interactive manner. It is analyzed here in terms of McGrenere and Ho’s extended definition of Gibsonian affordance.</p> <p>The mileage calculator has four types of design patterns that control mileage-altering variables: slides (driving type, vehicle), dials (highway speed), scrollers (temperature), and buttons (climate control). Each pattern provides certain affordances through the use of metaphors. For instance, the raised-looking knob within the blue, vertical track reminds the user of a physical slide switch, which brings forth the affordance of ‘slideability’. The highway speed dial in the shape of a speedometer is also an excellent use of metaphor. The user can easily recognize what the dial controls (speed). The knob also has a style that affords ‘slideability’</p> <figure> <figcaption>Figure 1: Four different types of controls used to vary mileage variables</figcaption> </figure> <p>The A/C button’s label and the fan icon above act as a priming mechanism to activate the schema of climate control. In fact, the entire website, with images of cars, roads, and dashboards activate the nodes within the semantic network related to motor vehicles. Thus when the user views the A/C button, the user understands its reference to the climate control system of a Tesla car, and not to that of a desk fan.</p> <p>Aforementioned affordances are all nested under the parent affordance of ‘function invokeability’. It is also important to distinguish between the underlying affordance of the controls from the information that specifies the affordance <a href="#McGrenere2000">[19]</a>. The affordance of mileage adjustability, and nested within it, slideability, pressability, and scrollability all exist regardless of the user’s perception and knowledge of them. The shape and style of the controls are the graphical vehicles that transport the affordance information to the user.</p> <p>The “How much do you pay per kilowatt hour” number spinner on the charge time and cost calculator is one design that fails to clearly specify the underlying affordance to the user. The design has two components: buttons that adjust the variable and a box that displays the monetary value. The design fails because the slightly depressed style of the box is indicative of an editable input box and invites users to click-and-edit, even though the field is read-only. There are no actionable affordances, yet the design looks as if it does. In Gaver’s term, this is a false affordance and signifies a sub-optimal π value. An alternative design is shown below.</p> <figure> <figcaption>Figure 2: (left) Current design with false affordance. (right) Recommended design without input field style</figcaption> </figure> <h2 id="conclusion">Conclusion</h2> <p>Prior knowledge plays a critical role in human cognitive tasks. Schemas and semantic networks are two models that map cognitive knowledge in the brain. Leveraging the facilitative effects of priming and metaphors can make designs intuitive and help the user assimilate or accommodate new information more easily. However, if the incorrect nodes of the semantic network are activated, designs can become difficult to comprehend and lead to abandonment. Designers should strive to design interfaces in a way that matches the user’s expectation and the affordances of the interfaces should provide actions that help the user meet their goals.</p> <h2 id="references">References</h2> <ol class="bibliography"><li><span id="Wickens2004">[1]C. D. Wickens, <i>An Introduction To Human Factors Engineering</i>, Second Edi. Upper Saddle River, NJ: Pearson Education, Inc., 2004, p. 587.</span></li> <li><span id="Arbib1992">[2]M. A. Arbib, “Schema Theory,” <i>Encyclopedia of artificial intelligence</i>, 1992.</span></li> <li><span id="Piaget1962">[3]J. Piaget, <i>Play, dreams and imitation</i>. 1962.</span></li> <li><span id="Chalmers2003">[4]P. a. Chalmers, “The role of cognitive theory in human–computer interface,” <i>Computers in Human Behavior</i>, vol. 19, no. 5, pp. 593–607, Sep. 2003.</span></li> <li><span id="Schmidt1976">[5]R. A. Schmidt, “The Schema as a Solution to Some Persistent Problems in Motor Learning Theory,” <i>Motor Control: Issues and Trends</i>, pp. 41–65, 1976.</span></li> <li><span id="Piaget1978">[6]J. Piaget, <i>The development of thought: Equilibration of cognitive structures</i>. B. Blackwell, 1978.</span></li> <li><span id="Rumelhart1976">[7]D. E. Rumelhart and A. Ortony, “The representation of knowledge in memory,” <i>Center for Human Information Processing</i>, pp. 99–135, 1976.</span></li> <li><span id="Collins1969">[8]A. M. Collins and M. R. Quillian, “Retrieval Time from Semantic Memory,” <i>Journal of verbal learning and verbal behavior</i>, vol. 2, 1969.</span></li> <li><span id="Steyvers2005">[9]M. Steyvers and J. B. Tenenbaum, “The large-scale structure of semantic networks: statistical analyses and a model of semantic growth.,” <i>Cognitive science</i>, vol. 29, no. 1, pp. 41–78, Jan. 2005.</span></li> <li><span id="Anderson1984">[10]J. R. Anderson and P. L. Pirolli, “Spread of activation.,” <i>Journal of \ldots</i>, vol. 10, no. 4, pp. 791–798, 1984.</span></li> <li><span id="Schacter1992">[11]D. L. Schacter, “Priming and Multiple Memory Systems: Perceptual Mechanisms of Implicit Memory,” <i>Journal of Cognitive Neuroscience</i>, vol. 4, no. 3, pp. 244–256, Jul. 1992.</span></li> <li><span id="Ratcliff1981">[12]R. Ratcliff and G. McKoon, “Does activation really spread?,” <i>Psychological review</i>, vol. 88, pp. 454–457, 1981.</span></li> <li><span id="Anderson1983">[13]J. R. Anderson, “A Spreading Activation Theory of Memory,” <i>Journal of verbal learning and verbal behavior</i>, 1983.</span></li> <li><span id="MacLeod1991">[14]C. M. MacLeod, “Haifa Centuryof Researchon the Stroop Effect: An Integrative Review,” <i>Psychological Bulletin</i>, vol. 109, no. 2, pp. 163–203, 1991.</span></li> <li><span id="McKoon1980">[15]G. McKoon and R. Ratcliff, “Priming in Item Recognition: The Organization of Propositions in Memory for Text,” <i>Journal of Verbal Learning and Verbal Behavior</i>, 1980.</span></li> <li><span id="Gibbs1992">[16]R. W. Gibbs, “Categorization and metaphor understanding,” <i>Psychological review</i>, pp. 572–577, 1992.</span></li> <li><span id="Gibson1977">[17]J. J. Gibson, “The theory of affordance,” <i>Perceiving, Acting and Knowing</i>, pp. 67–82, 1977.</span></li> <li><span id="Norman1999">[18]D. A. Norman, “Affordance, Concentions, and Design,” <i>interactions</i>, pp. 38–42, 1999.</span></li> <li><span id="McGrenere2000">[19]J. McGrenere and W. Ho, “Affordances: Clarifying and evolving a concept,” <i>Graphics Interface</i>, no. May, pp. 1–8, 2000.</span></li> <li><span id="Gaver1991">[20]W. W. Gaver, “Technology Affordances,” <i>\ldots in computing systems: Reaching through technology</i>, 1991.</span></li> <li><span id="Warren1984">[21]W. H. Warren, “Perceiving affordances: Visual guidance of stair climbing,” <i>Journal of Experimental Psychology: Human Perception and Performance</i>, vol. 10, pp. 683–703, 1984.</span></li></ol> </article> <article> <h1>Water Me, Please!</h1> <p>2013-03-10T00:00:00-08:00</p> <h1 id="water-me-please">Water Me, Please!</h1> <p><em>A tale of how I built a water level sensor to monitor my bamboo’s water supply. When water is depleted, it tweets ‘WATER ME FOOL’.</em></p> <figure> <figcaption>My overgrown bamboo</figcaption> </figure> <p>My bamboo is dying.</p> <p>I’ve had my bamboo plant ever since I started working at my current company. It’s a nice addition to my office desk, with it being green and all. The problem is, I always forget to water the plant. The yellowed, coiled up leaves are my only reminder. I have no idea how this plant has made it this far.</p> <h2 id="lets-fix-it">Let’s Fix It</h2> <p>There are many ways to “fix” this. One could simply set a recurring alarm on a phone every 3 or so weeks, as a reminder to water the bamboo. It’s the easiest route, but there’s certainly no fun involved.</p> <p>What if the plant told me that it needed water? This <a href="http://www.botanicalls.com/">isn’t a new idea</a>, but I had an Arduino Uno collecting dust. I think it’s time to make use of it.</p> <h2 id="arduino-to-the-rescue">Arduino to the Rescue</h2> <p>The requirements for this new system would be simple.</p> <ol> <li>Accurately notify me when the water level is low</li> <li>Simple to implement</li> </ol> <p>Diving deeper into (1), the system should publish a tweet to its <a href="https://twitter.com/kensplant">feed</a> when it is deprived of water and when its been rescued.</p> <p>Here’s how I implemented it.</p> <h3 id="hardware">Hardware</h3> <p>I read this <a href="http://lifeboatfarm.wordpress.com/2009/12/28/arduino-water-level-gauge/">blog</a> and used their design for the water level sensor. For my design, I’m using one 10kΩ and five 2.2kΩ resistors in series. Here’s the schematic drawing:</p> <figure> <figcaption>Design of water sensor</figcaption> </figure> <p>The theory behind this is that when the when the sensor (the five 2.2kΩ resistors) is submerged into water, the sensor gets shorted resulting in a change in voltage. By measuring this voltage change, we can determine when water level is low.</p> <p>Sensor measurements are read in through analog sensor A0. Power is programmatically applied via pin 7 only when measurements are needed. This is to limit electrolysis.</p> <p>And here’s the prototype:</p> <figure> <figcaption>The resistors are wrapped around the GND wire to make it more probe-like</figcaption> </figure> <p>It works like a charm. The raw data readings range from 540 (when it’s dry) to around 350 (when its submerged in water). The values don’t mean anything. All the software cares about is when the measurement has surpassed the IM_DYING_GIVE_ME_WATER threshold. This value is set to 520.</p> <h3 id="software">Software</h3> <p>I wrote a node.js script that interfaces with the Arduino to collect readings from the water sensor. I’ll explain the gist of how the script works here. For the full source code, checkout my <a href="https://github.com/khirakawa/water-me-please">repo</a>.</p> <p>The node.js script uses <a href="https://github.com/ecto/duino">duino</a>. Its a neat, lightweight framework for working with Arduinos in node.js. As per their instructions, I’ve uploaded the <code>src/du.ino</code> sketch onto my Arduino. Now I can operate the Arduino with javascript. Awesome.</p> <p>The water sensor code is in <code>lib/sensor.js</code>. Inside the module you’ll find the <code>WaterLevelSensor</code> class. When instantiated, this object will create a new <code>arduino.Board</code> object at a baudrate of 9600, set up the analog sensor at pin A0, and set the pin mode of pin 7 to ‘OUT’. Pin 7 is used to toggle the power to the sensor. Here’s the code.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// our water level sensor</span> <span class="kd">var</span> <span class="nx">WaterLevelSensor</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span> <span class="k">this</span><span class="p">.</span><span class="nx">debug</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">debug</span> <span class="o">||</span> <span class="kc">false</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">pin</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">pin</span> <span class="o">||</span> <span class="mi">7</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">sensor_pin</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">sensor_pin</span> <span class="o">||</span> <span class="s1">'A0'</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">baudrate</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">baudrate</span> <span class="o">||</span> <span class="mi">9600</span><span class="p">;</span> <span class="c1">// This will be used to determine when to tweet</span> <span class="k">this</span><span class="p">.</span><span class="nx">IM_DYING_THRESHOLD</span> <span class="o">=</span> <span class="mi">520</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">board</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">arduino</span><span class="p">.</span><span class="nx">Board</span><span class="p">({</span> <span class="nx">baudrate</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">baudrate</span><span class="p">,</span> <span class="nx">debug</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">debug</span> <span class="p">});</span> <span class="k">this</span><span class="p">.</span><span class="nx">sensor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">arduino</span><span class="p">.</span><span class="nx">Sensor</span><span class="p">({</span> <span class="nx">board</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">board</span><span class="p">,</span> <span class="nx">pin</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">sensor_pin</span><span class="p">,</span> <span class="nx">throttle</span><span class="o">:</span> <span class="mi">100</span> <span class="p">});</span> <span class="k">this</span><span class="p">.</span><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// set pin to out mode</span> <span class="nx">self</span><span class="p">.</span><span class="nx">board</span><span class="p">.</span><span class="nx">pinMode</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">pin</span><span class="p">,</span> <span class="s1">'out'</span><span class="p">);</span> <span class="nx">self</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">);</span> <span class="p">});</span> <span class="p">};</span></code></pre></div> <p>In order for the object to emit an event on the ready state, it must inherit <code>events.EventEmitter</code>.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// make it emitterable</span> <span class="nx">util</span><span class="p">.</span><span class="nx">inherits</span><span class="p">(</span><span class="nx">WaterLevelSensor</span><span class="p">,</span> <span class="nx">events</span><span class="p">.</span><span class="nx">EventEmitter</span><span class="p">);</span></code></pre></div> <p>Finally, it defines the measure method. The code powers the sensor by setting pin 7 to HIGH and then takes the mean average of five measurements. The final value is passed to a callback. Lastly, power pin (7) is set to LOW to power off the sensor. This is important because we don’t want DC current to continuously flow through the resistors in the water and cause corrosion via electrolysis.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// measures for 5 reads and calls callback with average value</span> <span class="nx">WaterLevelSensor</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">measure</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span> <span class="nx">readCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">measurements</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// running list of measurements</span> <span class="c1">// send 5V to pin to enable sensor</span> <span class="k">this</span><span class="p">.</span><span class="nx">board</span><span class="p">.</span><span class="nx">digitalWrite</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pin</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">board</span><span class="p">.</span><span class="nx">HIGH</span><span class="p">);</span> <span class="c1">// read from sensor</span> <span class="kd">var</span> <span class="nx">readCallback</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span> <span class="nx">measurements</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="mi">10</span><span class="p">));</span> <span class="k">if</span> <span class="p">(</span><span class="nx">measurements</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">5</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">median</span> <span class="o">=</span> <span class="nx">getMedian</span><span class="p">(</span><span class="nx">measurements</span><span class="p">);</span> <span class="c1">// reset mode</span> <span class="nx">self</span><span class="p">.</span><span class="nx">board</span><span class="p">.</span><span class="nx">digitalWrite</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">pin</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">board</span><span class="p">.</span><span class="nx">LOW</span><span class="p">);</span> <span class="nx">self</span><span class="p">.</span><span class="nx">sensor</span><span class="p">.</span><span class="nx">removeListener</span><span class="p">(</span><span class="s1">'read'</span><span class="p">,</span> <span class="nx">readCallback</span><span class="p">);</span> <span class="c1">// we're finished, evoke the callback</span> <span class="nx">callback</span><span class="p">(</span><span class="nx">median</span><span class="p">);</span> <span class="p">}</span> <span class="p">};</span> <span class="k">this</span><span class="p">.</span><span class="nx">sensor</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'read'</span><span class="p">,</span> <span class="nx">readCallback</span><span class="p">);</span> <span class="p">};</span></code></pre></div> <p>Here’s an example of how the <code>WaterLevelSensor</code> object is used.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">sensor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WaterLevelSensor</span><span class="p">();</span> <span class="c1">// on ready state</span> <span class="nx">sensor</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="nx">sensor</span><span class="p">.</span><span class="nx">measure</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// If the value exceeds threshold, tweet.</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">></span> <span class="nx">sensor</span><span class="p">.</span><span class="nx">IM_DYING_THRESHOLD</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// tweet it</span> <span class="p">}</span> <span class="p">});</span> <span class="p">},</span> <span class="mi">300000</span><span class="p">);</span> <span class="c1">// measure every 5 minutes</span> <span class="p">});</span></code></pre></div> <p>There you have it. A homemade Botanicalls made from a bunch of resistors, jumper wires, an Arduino, and node.js.</p> <figure> <figcaption>Water level sensor in action</figcaption> </figure> <h2 id="next-steps">Next Steps</h2> <p>Although the code does its best to limit corrosion, the resistors are still exposed to the elements and will naturally corrode. Unfortunately, the resistors on my sensor have already rusted due to extensive testing of the sensor (still works though!). An alternative method would be to use ultra-sound sensing or capacitive sensing. That’ll be a topic worthy of its own project. For now, I’m happy with what I’ve made.</p> <p>Happy coding!</p> </article> <article> <h1>Preattentive Processing</h1> <p>2013-03-03T00:00:00-08:00</p> <h1 id="preattentive-processing">Preattentive Processing</h1> <p><em>Research and Application of the Gestalt Principles</em></p> <h2 id="preattentive-processing-1">Preattentive Processing</h2> <p>Preattentive processing plays an important role in human vision. An understanding of the fundamental mechanism in which preattentive processing occurs allows designers to design displays with increased quality and quantity of information. When patterns or groups are identified before conscious attention is directed, preattentive processing is said to have occurred. This suggests that processing occurs in a rapid, parallel fashion across the visual field <a href="#Treisman1985">[1]</a>. Typically, the time it takes for a preattentive task to complete is within 200 to 250ms, and this is accomplished with minimal effort <a href="#Healey1993">[2]</a>. These features are said to have a ‘pop-out’ effect <a href="#Ware2013">[3, P. 153]</a>. Examples of preattentively processed features that exhibit said effect include shape, color, and proximity.</p> <h3 id="the-importance-of-preattentive-processing">The Importance of Preattentive Processing</h3> <p>Preattentive processing is important in many regards. From a neural network perspective, the ability to decompose, group, and compress the physical signals received by the retina is driven by efficiency. This is because human attention has only a meager capacity <a href="#Zhaoping2006">[4]</a>. From a design perspective, it is often useful to be able to show information ‘at a glance’. If a mark on a map is required to be instantaneously identified of belonging to a certain type, it should be differentiated from all other marks in a preattentive manner <a href="#Ware2013">[3, P. 154]</a>. Furthermore, preattentive processing is crucial in organizing the information-dense field of vision as a whole.</p> <h2 id="gestalt-laws">Gestalt Laws</h2> <p>Gestalt laws provide a clear description of many basic perceptual phenomena of pattern recognition. According to Koffka, the laws explain how individual elements may be visually organized into structures <a href="#Koffka1935">[5]</a>. These psychological principles have influenced many research areas since 1924, including visual screen design <a href="#Chang2002">[6]</a>. However, the German psychologists behind the gestalt laws were simply observers; the laws relied heavily on phenomenology and did not sufficiently support their principles with objective data <a href="#Kubovy1998">[7]</a>. Although their neurological explanations for these laws have been debunked, the robust laws themselves have withstood the test of time.</p> <h3 id="proximity">Proximity</h3> <p>One of the major gestalt laws of organizing the visual field is the grouping of stimuli on the basis of proximity. The law simply states that objects that are close together are grouped together. This is alternatively called the spatial concentration principle <a href="#Slocum1983">[8]</a>. By spatially grouping elements, less time is spent with eye movement and neural processing because information is picked up more readily in foveal vision <a href="#Ware2013">[3, P. 181]</a>. According to this law three rows of four black circles are seen in figure 1.</p> <figure> <figcaption>Figure 1: Three rows of four black circles are seen based on the law of proximity</figcaption> </figure> <p>The gestalt psychologists never demonstrated whether it is the physical proximal stimuli on the retina, or the perceived proximity that governs this principle <a href="#Rock1964">[9]</a>. Later research effectively showed that proximal grouping can in fact be driven purely from a bottom-up, preattentive process, as demonstrated by Compton & Logan’s modifed version of the van Oeffelen and Vos’s code algorithm <a href="#Compton1993">[10]</a>. When proximity is the sole differentiating feature, the gestalt law of proximity stands; objects that are clustered together are grouped. Making design decisions based simply on visual aesthetics or “what looks good” should never supersede this principle. A common design practice therefore is to place symbols representing related information close together.</p> <h3 id="similarity">Similarity</h3> <p>The gestalt law of similarity state that objects that are similar in features such as color, orientation, and shape, are grouped together. Koffka demonstrated that grouping by shape is stronger than grouping by color by contrasting the effectiveness of each similarity feature to that of proximity. Even when color and shape similarity is not in competition with proximity grouping, grouping by shape similarity had a stronger effect <a href="#Koffka1935">[5]</a>.</p> <p>It would of course be a mistake to conclude that one principle is invariably stronger than the other. More recent research has demonstrated that grouping of common color is actually more powerful than grouping by common shape. Examination of similarity and proximity showed persuasive evidence that under certain conditions, both common color and shape were shown to override grouping by proximity <a href="#Quinlan1998">[11]</a>. What this seems to suggest is that there is an intimate relationship between the features of similarity (color, shape) and proximity, and that it is important to consider the effects of each individual effect, and its conjoint effect when making design decisions. This is especially the case when designing grid layouts of a data set; the use of low-level visual similarity channel properties such as color are recommended <a href="#Ware2013">[3, P. 182]</a>.</p> <h3 id="similarity-and-proximity">Similarity and Proximity</h3> <p>When the proximity feature is conjoined with other features, there are cases where the principle breaks down. For example, in the figure 2, the proximity principle predicts grouping into columns, yet for some, rows of dots are seen; the row-column perception seems to fluctuate. This is because the proximity and similarity principles are acting in opposition.</p> <figure> <figcaption>Figure 2: Proximity and color similarity acting in opposition</figcaption> </figure> <p>For simple dot lattice patterns, Kubovy & Holcombe has shown that the relationship is a decaying exponential function. Additionally, they have found that the features have an additive property; the overall effect is the sum of each individual effect <a href="#Kubovy2008">[12]</a>. Unfortunately, to generalize their findings, strength functions for more complex feature patterns must be discovered <a href="#Kubovy1998">[7]</a>. This example has shown that specific types of redundant coding can lead to a decrease in visual search performance for certain elements <a href="#Ware2013">[3, P. 160]</a>.</p> <h3 id="orientation">Orientation</h3> <p>Another similarity feature that is worth discussing is the feature of orientation. Orientation is one of the basic features processed at the first, parallel processing stage. When exploring the manner in which orientation controls perceptual grouping, Beck found that “differences in line orientation could be as effective as differences in brightness in segregating two groups of elements” <a href="#Beck1967">[13]</a>. Furthermore, Beck has shown that line orientations are more readily grouped if the direction of the component lines is 45 or 135 degrees, and that vertical and horizontal lines do not readily facilitate grouping.</p> <p>This seems to correlate with the visual system’s physical structure; according to the Gabor model of V1 receptive fields, V1 neurons have an orientation tuning of at least 30 degrees <a href="#Ware2013">[3, P. 204]</a>. Thus symbol and glyph element orientations should be separated by at least 30 degrees (and optimally, 45 degrees) for a texture field to be distinct from an adjacent texture field.</p> <h3 id="closure-and-common-region">Closure and Common Region</h3> <p>A common region is a terminology used by Palmer to describe the region within an enclosed contour, and is a stronger organizing principle than proximity <a href="#Palmer1992">[14]</a>. Ware explains, “when a closed contour is seen, there is a strong perceptual tendency to divide regions of space into inside or outside the contour” <a href="#Ware2013">[3, P. 186]</a>. Essentially, elements within a common region or a closure are grouped together. This occurs regardless of the number of elements contained within it <a href="#Donnelly1991">[15]</a> and can be “dominated by the smallest background area” <a href="#Palmer1992">[14]</a>.</p> <h2 id="redundant-coding">Redundant Coding</h2> <p>Redundant coding, that is, adding visual redundancy to elements, can lead to a decrease in visual search performance for certain elements <a href="#Ware2013">[3, P. 160]</a>, as seen above in figure 2. This is because conjunction searches are generally not preattentive, although some combinations of features have been proven to be preattentive, such as luminance and shape <a href="#Ware2013">[3, P. 161]</a>. Feature Integration Theory explains the difference between disjunctive and conjunctive search <a href="#Treisman1980">[16]</a>.</p> <h2 id="feature-integration-theory">Feature Integration Theory</h2> <p>Feature Integration Theory (FIT) is a theory that seeks to explain the phenomena of preattentive processing <a href="#Treisman1980">[16]</a>. According to the theory, the perceptual system is divided into separate maps, each of which records the presence of different visual features and the location of the features it represents. Looking for a target that differs from its distractors by a single factor, such as shape, requires consulting of a single feature map. However for conjunctive search, focal attention must be give to combine and compare multiple features maps. This joint search is what causes conjunctive search to be inefficient <a href="#Smith2007">[17, P. 132]</a>. Observers may also report illusory conjunctions when the brain fails to combine and compare maps, perhaps due to attentional overload <a href="#Treisman1982">[18]</a>.</p> <h2 id="application-of-research-rio-2016rio2016com">Application of Research: <a href="rio2016.com">Rio 2016</a></h2> <p>The Rio 2016 Olympic website was analyzed and reviewed based on the principles of proximity, similarity, and common region. The site is not a time-sensitive site, but is nevertheless densely packed with information. The site’s aim to excite, inspire, and spread the knowledge of Rio is done through a mixture of text and graphics, all organized using vibrant colors, lines, white space, and shapes. It is critical for the website to display these information in proper structure.</p> <h3 id="proximity-1">Proximity</h3> <p>The sections of the homepage under the main banner are grouped together using proximity. In general, photo images that are spatially close to corresponding text are clustered as a whole. An example of this is the “News”, “Interview”, and “Rio de Janeiro” section. The numbered list under the “Most Viewed” section is also identified as a block due to close proximity and alignment. In fact, the border between each list item can be removed to reduce redundancy (Figure 3).</p> <figure> <figcaption>Figure 3: Removing the bottom border of each item list still yields the same grouping effect due to close proximity</figcaption> </figure> <p>Each individual section is grouped using white space, albeit not in an optimal fashion. Take for example, the goalball player under the “Paralympic Sports” section. Based on proximity, the player is falsely associated with the “Time Brasil” section, especially considering similarity in skin tone and the orange color-coding of the “Time Brasil” section. The “Learn More” call to action button is equidistant from the goalball player and the “Rio de Janeiro” section tag, yet the button is related to the latter, again, due to similarities in color. This supports Quinlan & Wilton’s stance that color similarity overrides proximity. An adjustment in the distance between each section is recommended to clearly separate out blocks of elements. Alternatively, a different color, or a common background can be used, although redundant coding should be avoided.</p> <figure> <figcaption>Figure 4: Alternative designs are compared against the original design (A) using different principles B) Increased distance between sections C) alternate color (purple) D) common background (gray)</figcaption> </figure> <h3 id="similarity-1">Similarity</h3> <p>Each individual section on the homepage is color coded in hues of orange, green, or blue. It is easy to differentiate between the “Olympic Sports” section in green and the “Time Brasil” section in orange. Shape similarity is also used to group section headings, although its strength is weakened by color similarity and lack of proximity.</p> <p>The countdown days can spark confusion. The law of proximity states that the two countdown numbers go together, yet color similarity yields different groupings; the Paralympic countdown is correctly bucketed with the “Time Brasil” section below, but the Olympic countdown is perhaps grouped with “Interviews” because of matching text color (blue). This is similar to the fluctuation problem seen in figure 2. A solution would be to color code both countdowns to be the same (orange).</p> <figure> <figcaption>Figure 5: By making the countdown colors the same, it is much easier to differentiate the two sections</figcaption> </figure> <h3 id="closure-and-common-region-1">Closure and Common Region</h3> <p>The site takes use of closure and common region to group elements on the page. The “Photos” and “News” sections are separated out from the rest of the sections because it has a common background of gray. Proximity would state that the “Photos” header and headline are separated from the group of photos near it, yet they are perceptually labeled as a single group. This supports the notion that common region is a much more powerful feature than proximity or similarity as demonstrated by Palmer <a href="#Palmer1992">[14]</a>. The “Rio 2016 and You” footer section at the bottom of the homepage exhibits the same grouping mechanism. Sections within the footer section are split based on closure, although the enclosing line itself is only part present.</p> <h2 id="conclusion">Conclusion</h2> <p>Preattentive processing is an important component of the visual system. As illustrated with Rio 2016 Olympic website, the gestalt principles of proximity, similarity, closure and common region can be used to easily capture information ‘at a glance’. Confusion can ensue, if the improper feature, or a combination of features, is applied. Designers should be aware of these principles to help organize the visual field without directed, conscious attention.</p> <h2 id="references">References</h2> <ol class="bibliography"><li><span id="Treisman1985">[1]A. Treisman, “Preattentive Processing in Vision,” <i>Computer vision, graphics, and image processing</i>, 1985.</span></li> <li><span id="Healey1993">[2]C. G. Healey, K. S. Booth, and J. T. Enns, “Harnessing preattentive processes for multivariate data visualization,” <i>Graphics Interface</i>, 1993.</span></li> <li><span id="Ware2013">[3]C. Ware, <i>Information Visualization</i>, Third Edit. Waltham, MA: Elsevier, 2013, p. 512.</span></li> <li><span id="Zhaoping2006">[4]L. Zhaoping and P. Dayan, “Pre-attentive visual selection.,” <i>Neural networks : the official journal of the International Neural Network Society</i>, vol. 19, no. 9, pp. 1437–9, Nov. 2006.</span></li> <li><span id="Koffka1935">[5]K. Koffka, “Principles of Gestalt psychology,” pp. 1–14, 1935.</span></li> <li><span id="Chang2002">[6]D. Chang, L. Dooley, and J. E. Tuovinen, “Gestalt Theory in Visual Screen Design — A New Look at an old subject,” <i>\ldots of the Seventh world conference on \ldots</i>, 2002.</span></li> <li><span id="Kubovy1998">[7]M. Kubovy, A. O. Holcombe, and J. Wagemans, “On the Lawfulness of Grouping by Proximity,” <i>Cognitive psychology</i>, vol. 98, no. 35, pp. 71–98, 1998.</span></li> <li><span id="Slocum1983">[8]T. A. Slocum, “Predicting visual clusters on graduated circle maps,” <i>Cartography and Geographic Information Science</i>, vol. 10, no. 1, pp. 59–72, 1983.</span></li> <li><span id="Rock1964">[9]I. Rock and L. Brosgole, “Grouping Based on Phenomenal Proximity.,” <i>Journal of experimental psychology</i>, vol. 67, no. 6, pp. 531–8, Jun. 1964.</span></li> <li><span id="Compton1993">[10]B. J. Compton and G. D. Logan, “Evaluating a computational model of perceptual grouping by proximity.,” <i>Perception & psychophysics</i>, vol. 53, no. 4, pp. 403–21, Apr. 1993.</span></li> <li><span id="Quinlan1998">[11]P. T. Quinlan and R. N. Wilton, “Grouping by proximity or similarity? Competition between the Gestalt principles in vision,” <i>Perception</i>, vol. 27, no. 4, pp. 417–430, 1998.</span></li> <li><span id="Kubovy2008">[12]M. Kubovy and M. van den Berg, “The whole is equal to the sum of its parts: a probabilistic model of grouping by proximity and similarity in regular patterns.,” <i>Psychological review</i>, vol. 115, no. 1, pp. 131–54, Jan. 2008.</span></li> <li><span id="Beck1967">[13]J. Beck, “Perceptual grouping produced by line figures,” <i>Perception & Psychophysics</i>, vol. 2, no. 11, pp. 491–495, Nov. 1967.</span></li> <li><span id="Palmer1992">[14]S. E. Palmer, “Common Region: A new principle of perceptual grouping,” <i>Cognitive psychology</i>, vol. 24, no. 3, pp. 436–447, 1992.</span></li> <li><span id="Donnelly1991">[15]N. Donnelly, G. W. Humphreys, and M. J. Riddoch, “Parallel computation of primitive shape descriptions,” <i>Journal of Experimental Psychology: Human Perception and Performance</i>, vol. 17, no. 2, p. 561, 1991.</span></li> <li><span id="Treisman1980">[16]a M. Treisman and G. Gelade, “A feature-integration theory of attention.,” <i>Cognitive psychology</i>, vol. 12, no. 1, pp. 97–136, Jan. 1980.</span></li> <li><span id="Smith2007">[17]E. E. Smith and S. M. Kosslyn, <i>No Title</i>. Prentice Hall, Inc, 2007, p. 610.</span></li> <li><span id="Treisman1982">[18]a Treisman, “Perceptual grouping and attention in visual search for features and for objects.,” <i>Journal of experimental psychology. Human perception and performance</i>, vol. 8, no. 2, pp. 194–214, Apr. 1982.</span></li></ol> </article> <article> <h1>The Significance of Contrast</h1> <p>2013-02-19T00:00:00-08:00</p> <h1 id="the-significance-of-contrast">The Significance of Contrast</h1> <p><em>Research and Application of the Effects of Contrast</em></p> <h2 id="signal-detection-theory">Signal Detection Theory</h2> <p>The human visual system has evolved to have survival purposes. Being able to spot a tiger amidst tall, golden grass is a life or death situation that depends heavily on the visual system’s ability to discern the target from its distractors. The more distractors there are, the less likely the target is detected. This phenomenon is called the set-size effect and is the result of an increase in the probability of the noise from one or more of the distractors exceeding that of the target, causing the observer to possibly choose a distractor instead of the target <a href="#Cameron2004">[1]</a>.</p> <p>The set-size effect can be modeled as a signal-noise problem by a broader theory called the signal detection theory. Signal detection theory is the means to discern information-bearing signals from background noise. The theory holds that the discrimination of a signal depends on the intensity of the signal and the psychophysical state of the individual. In the case of the tiger, the signal stemming from the well-camouflaged tiger may be too weak for the individual to perceive, leaving the tiger undetected.</p> <h2 id="how-to-achieve-signal-detection">How to Achieve Signal Detection</h2> <p>The visual system is continuously processing signals from the visual field. During the early stages of the visual system process, billions of neurons work in parallel to extract features, such as the orientations of edges and colors. At this stage, the bottom-up, physical sensory processors proceed in a fairly automatic fashion <a href="#Wolfe1994">[2]</a>. Unfortunately, there is more information out in the world than the human brain can process and therefore a more selective approach is needed.</p> <p>One option is to discard input. Receptors in human eyes in the periphery are spaced more widely and ganglion cell receptive fields are large for coarser sampling. Only at the fovea is the retinal image processed in full detail. The second option is to process the information selectively by conducting a limited capacity search across a smaller contained space <a href="#Wolfe1994">[2]</a>. In either case, the signal arriving to the retina from the physical world is key. The stronger the signal, the more likely the signal will reach our visual cortex the quickest and grab attention. One important component of signal strength is the presence of contrast.</p> <h2 id="what-is-contrast">What is Contrast?</h2> <p>Contrast is the difference from the perceptual norm. It is the difference in light between the target and the background. This relative measurement of light is what is transmitted from the eye to the brain; nothing about the physical amount of light falling onto the retina is channeled to the brain <a href="#Ware2013">[3, P. 69]</a>. Generally, the higher the contrast, the larger the signal strength becomes. It should be noted however, that the highest contrast does not necessarily mean the best contrast, which is suggested by the split-complementary color scheme. Ultimately, whether an individual sees something depends heavily on contrast.</p> <h3 id="luminance">Luminance</h3> <p>Luminance is the physical measure of the amount of light and plays a key role in determining contrast. It is one dimension of the color space (red-green, blue-yellow being the other two) and carries the most information, making it the most important dimension for human vision. Without luminance, visual perception would be impossible.</p> <p>Manipulating luminance contrast can create various effects. An example of this is simultaneous brightness contrast, which is the general effect whereby a gray patch placed on a dark background appears lighter than the same patch on a lighter background. This effect can lead to errors of judgment (nearly 20%) when reading quantitative values displayed using a gray scale. Hence, it is advisable not to use gray scale to represent more than two to four numerical values <a href="#Ware2013">[3, P. 75]</a>.</p> <p>The loss of luminance contrast can have an impact on the reading rates of normally sighted readers. The reading rates of users decreased by a factor of two for a tenfold reduction in luminance contrast of text. Comparing color contrast to reading performance also showed a similar result, suggesting that color contrast also affects reading rates <a href="#Legge1990">[4]</a>. Furthermore, the size of the text contributes to the readability of text, especially for people with low vision; reading rates declined rapidly for very small and very large letters <a href="#Legge1987">[5]</a>.</p> <h3 id="brightness">Brightness</h3> <p>Brightness is the perception of light. It is the psychological response to a physical stimulus of luminance. The human visual system is very sensitive to this stimulus; visual senses can detect about a 0.5% change in brightness, constituting brightness as a crucial channel in which information is delivered <a href="#Ware2013">[3, P. 89]</a>. The relationship between luminance (L) and brightness (B) can be represented by S.S. Stevens simple model, B = KL^n, where K is a constant and n is an exponent in the order of 0.33 <a href="#Ngai2000">[6]</a>. This simple equation however only applies to lights viewed in relative isolation in the dark, such as bright LED lights on the control panel of an aircraft during nighttime <a href="#Ware2013">[3, P. 83]</a>. Hue, saturation, and other variables must be taken into consideration when designing for brightness.</p> <h3 id="hue">Hue</h3> <p>Hue is the wavelength of light and is the color we perceive. According to the V(λ) function, humans are roughly 100 times more sensitive to yellow than to blue <a href="#Ware2013">[3, P. 80]</a>. Furthermore, the visual sensors are less receptive to red than to other colors such as green, yellow, or orange. Using blue colors on a black background should be avoided because the luminance difference between the two colors is minimal. Furthermore, equiluminant colors can be stressful to see because the visual system cannot perceive the edges properly. A minimum luminance contrast ratio of 3:1 is recommended <a href="#Ware2013">[3, P. 82]</a>.</p> <p>The human eye consists of three distinct color receptors called cones and light sensitive receptors called rods. The human foveal vision has higher concentration of green and red sensitive cones, but no rods, making red, green, and yellow look sharper and crisper. The peripheral vision on the other hand, has a high concentration of blue sensitive cones and luminance sensitive rods; another reason to avoid using blue for smaller, finer details in a visually competitive arena.</p> <p>A characteristic that limits the effectiveness of color is that roughly 7 percent of the male population is color-blind. Most prevalent is protanopia, which is the color deficiency in the red-green channel. Another limitation is that the color vision facility of human visual sensors become less engaged under low illumination settings, particularly for red because it is not seen by rods <a href="#Wickens2004">[7, P. 73]</a>. Although color plays a crucial role in data visualization, an important guideline is to design for monochrome first so that elements can still be seen under non-optimal conditions <a href="#Schneiderman2005">[8]</a>.</p> <h3 id="the-special-properties-of-blue">The Special Properties of Blue</h3> <p>Blue is a special hue because it is the only color that is known to have a universal meaning. It is also the hue that is least receptive to the eye. This is especially the case for the elderly. The elderly have a difficult time perceiving blue, especially in low contrast conditions, because of poor visual acuity <a href="#Owsley1981">[9]</a>; as time progresses our eye lens, the muscles around the eye become rigid, and the eye accumulates damage from years of UV light exposure. Blue is also typically out of focus, particularly when a nearby red object is focused due to chromatic aberration <a href="#Ware2013">[3, P. 49]</a>. For these reasons, blue is not recommended for use in small, fine details.</p> <h3 id="saturation">Saturation</h3> <p>Saturation is another dimension that affects contrast. Saturation represents the purity of the color. The less saturation there is, the more washed out a color looks. An object’s perceived saturation is also determined by its surrounding. Objects appear more vivid and richly saturated against low-contrast, gray surroundings than against high-contrast, multi-colored backgrounds <a href="#Brown1997">[10]</a>. For large color coded areas, less saturation should be used. For example, maps should have low saturation so that smaller objects with higher saturation, such as dropped pins, can be distinctly seen <a href="#Ware2013">[3, P. 125]</a>.</p> <h2 id="application-of-research---scroogledcom">Application of Research - Scroogled.com</h2> <p>Scroogled.com is a website that uses high contrast to gain attention and provide a sense of alertness. With its highly saturated colors and moving arrows, it is a visual arena with almost every element fighting to grab the observer’s attention. Improvements can be made to the site to reduce fatigue and visual stress.</p> <h3 id="red-alert">Red Alert</h3> <p>Take for example the alert message on privacy on the homepage of Scroogled. The background is a highly saturated red that consumes a large portion of the real estate on the page. It has bolded white text for the headline and uses a smaller, finer font for detailed text. The section passes the minimum contrast ratio of 3:1 with a ratio of 5.9:1 (using Colour Contrast Analyzer found <a href="http://paciellogroup.com/resources/contrastAnalyser">here</a> ), and works well for protanopia users who are red-green color-blind. However, the use of this particular red is fatiguing because it has extremely high signal strength, making the white text difficult to read. Additionally, the area has a high density of high contrast edges as well, which contributes to fatigue. This issue falls into the bucket of too much contrast, as users are susceptible to the phenomenon of negative afterimage <a href="#Wickens2004">[7, P. 73]</a>. It is recommended that the background color is lowered in saturation or brightness or swapped out with a different hue altogether.</p> <figure> <figcaption>Figure 1: Left - The current website with high contrast background. Right - The same background with lowered brightness for lowered signal strength</figcaption> </figure> <h3 id="the-logo">The Logo</h3> <p>The Scroogled logo is the largest text on the page and is positioned at a prominent location. When viewed at a small enough browser width, the logo overlaps with the background image of the two individuals. Every letter overlapping the image except for the yellow ‘E’ is stressful to see because they are all roughly equiluminant with the background. The blue ‘L’ next to the red ‘G’ becomes unfocused when visual attention is turned to the red ‘G’.</p> <figure> <figcaption>Table 1: the luminance contrast measured for letters overlapping the background image. The background was determined to be the average color around the letter within a 5px range.</figcaption> </figure> <p>Although the relative large size helps to see the logo, a number of improvements can be made. First, luminance contrast boundaries can be used to help define the large letters (Wave, p.113). Second, the opacity of the background can be dropped to increase the luminance contrast as well as the color and brightness difference.</p> <figure> <figcaption>Figure 2: The logo with a darker background</figcaption> </figure> <h2 id="data-visualization">Data Visualization</h2> <p>The Carnegie Mellon study explained on the “Get the Facts” page displays two charts for data visualization. One is a pie chart with each sector color-coded with different shades of blue. Those that have poor acuity, such as the elderly, will find it difficult to perceive the numbers labeled on each sector, especially for the three sectors on the left (5%, 13%, 16%). Even if the chart was designed with monochrome first as suggested by Schneiderman, the number of gray shades exceeds that of the recommended two to four numerical values <a href="#Ware2013">[3, P. 75]</a>. An improvement would be to use more than just one hue to color-code the pie chart in addition to using bolded text for higher contrast.</p> <figure> <figcaption>Figure 3: Left - The original pie chart. Middle - Monochromatic pie chart. Right - Pie chart with different hues used for color-coding.</figcaption> </figure> <h2 id="conclusion">Conclusion</h2> <p>The visual system depends heavily on the relative signals from the visual field. The most basic component to signal strength is therefore the presence of contrast. Luminance, brightness, hue, and saturation can all be used to create contrast. As shown with Scroogled.com, the excess or lack of contrast makes elements difficult to perceive. Interfaces should be designed with the right amount of contrast for the perceived visual system.</p> <h2 id="references">References</h2> <ol class="bibliography"><li><span id="Cameron2004">[1]E. L. Cameron, J. C. Tai, M. P. Eckstein, and M. Carrasco, “Signal detection theory applied to three visual search tasks–identification, yes/no detection and localization.,” <i>Spatial vision</i>, vol. 17, no. 4-5, pp. 295–325, Jan. 2004.</span></li> <li><span id="Wolfe1994">[2]J. M. Wolfe, “Guided search 2.0 A revised model of visual search,” <i>Psychonomic bulletin & review</i>, vol. 1, no. 2, pp. 202–238, 1994.</span></li> <li><span id="Ware2013">[3]C. Ware, <i>Information Visualization</i>, Third Edit. Waltham, MA: Elsevier, 2013, p. 512.</span></li> <li><span id="Legge1990">[4]G. E. Legge, D. H. Parish, a Luebker, and L. H. Wurm, “Psychophysics of reading. XI. Comparing color contrast and luminance contrast.,” <i>Journal of the Optical Society of America. A, Optics and image science</i>, vol. 7, no. 10, pp. 2002–10, Oct. 1990.</span></li> <li><span id="Legge1987">[5]G. E. Legge, G. S. Rubin, and A. Luebker, “PSYCHOPHYSICS OF READING : V . THE ROLE OF CONTRAST IN NORMAL VISION,” <i>Vision research</i>, vol. 27, no. 7, pp. 1165–1177, 1987.</span></li> <li><span id="Ngai2000">[6]P. Y. Ngai, “The Relationship Between Luminance Uniformity and Brightness Perception,” <i>Journal of the Illuminating Engineering Society</i>, vol. 29, no. 1, pp. 41–50, 2000.</span></li> <li><span id="Wickens2004">[7]C. D. Wickens, <i>An Introduction To Human Factors Engineering</i>, Second Edi. Upper Saddle River, NJ: Pearson Education, Inc., 2004, p. 587.</span></li> <li><span id="Schneiderman2005">[8]S. B. Schneiderman and C. Plaisant, <i>Designing The User Interface</i>, 4Th Editio. Pearson Addison Wesley, USA, 2005.</span></li> <li><span id="Owsley1981">[9]C. Owsley, R. Sekuler, and C. Boldt, “Aging and low-contrast vision: face perception.,” <i>Investigative Ophthalmology & Visual Science</i>, no. August, pp. 362–365, 1981.</span></li> <li><span id="Brown1997">[10]R. O. Brown and D. I. MacLeod, “Color appearance depends on the variance of surround colors.,” <i>Current biology : CB</i>, vol. 7, no. 11, pp. 844–9, Nov. 1997.</span></li></ol> </article> </main></body></html>