edit-article

Article Description: [VIDEO 66:00*+summary notes(mine)] Jensen Harris Presentation, a director of PM with Microsoft's (MSFT) windows UX team, explains some of the thought processes that were behind the design of the new windows 8 User Interface(UI).

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center; padding-left: 30px;">windows UI what were they thinking?</h1> <h2>[WHAT]</h2> <ol> <li>[VIDEO 66:00*]&nbsp;Jensen Harris, director of PM&nbsp;with&nbsp;Microsoft's (MSFT) windows UX&nbsp;team,&nbsp;explains&nbsp;some of&nbsp;the thought processes&nbsp;that&nbsp;were&nbsp;behind the design of the new windows 8 User Interface(UI). This presentation was given at the 2012 UX (user interface) design conference.</li> <ol> <li><a href="http://vimeo.com/52173464" target="_blank">http://vimeo.com/52173464</a>&nbsp;&nbsp;</li> </ol></ol> <h2 style="text-align: left;">my summary&nbsp;notes</h2> <ol> <li><strong>[00:00] win 7 was a colossal success for msft!</strong></li> <ol> <li>he says over 500 million licences sold,</li> <ol> <li>SIDE NOTE more recently(2012-10)&nbsp;Balmer cited 670 million&nbsp;copies&nbsp;also, Jensen&nbsp;BRINGs UP good point in that "colosall #" of licences SOLD it does NOT&nbsp;COUNT&nbsp;ALL the ILLEGAL copies that 'may be' in use</li> </ol></ol> <li><strong>[00:00] ?= is "familiarity" the best approach?</strong></li> <ol> <li>?</li> </ol> <li><strong>then brings up some examples of "familiarity" VS "modern" and how modern "changed things"</strong></li> <ol> <li>ex ps3 controller VS nintendo wii (changed things)</li> <li>traditional cellphone VS iphone (changed things)</li> <li>toyota familiar, toyota prius modern</li> <li>wordperfect 5.1(familar) vs word 1.0(modern)</li> <li>windows&nbsp;start button/menu is familiar ( design inception in 1992, implemented in 1995 (win95)</li> <li>start button+menu &amp; taskbar &amp; desktop &amp; icons &amp; explorer</li> <li>Designed for the "things we did with the PC in 92", maybe not for things that we do with the pc now.&nbsp;</li> </ol> <li><strong>came up with 5 areas of focus for a "modern" windows</strong></li> <ol> <li>Expectations = people, Web, &nbsp;cloud</li> <li>Scenarios = read, watch, devices in your life</li> <li>Ineraction= touch, new postures</li> <li>Development = html5, css, js</li> <li>Visual design= digital, broadcast quality</li> </ol> <li><strong>essentially now, people/users are booting their computer twice</strong></li> <ol> <li>pc</li> <li>browser&nbsp;</li> </ol> <li><strong>New postures,</strong></li> <ol> <li>not just mouse and keyboard, 5 pointers on each hand, &nbsp;</li> </ol> <li><strong>development</strong></li> <ol> <li>New apps are built with html5, css and javascript(aka web technologies),&nbsp;they&nbsp;can take full advantage of the capablities of the PC, developers who can develop a website can develop a windows app, you dont have to learn new proprietary technologies,</li> </ol> <li><strong>digital design </strong></li> <ol> <li>authentical digital</li> </ol> <li><strong>[24:00] win release PREVIEW video&nbsp;of "start screen" / "active tiles"- aka&nbsp;the "home" of windows</strong></li> <ol> <li>"feels like&nbsp;a house made out of the internet" - david pierce&nbsp;- the verge</li> <li>"dont have to go into every app to get info out, its just there" jensen - msft</li> <li>tiles - PIN&nbsp; - apps, programs,</li> <li>tiles - PIN ++&nbsp; - people, books, webpages, stocks, albums, sports teams, weather,</li> </ol> <li><strong>[26:00] demonstrates</strong></li> <ol> <li>semantic zoom out - to move tiles around start screen</li> <li>native mult touch - - select a tile with 1 finger, pan screen(scrollHorizontal) with a second finger</li> <li>charms - "are the fundamental things windows is made of"</li> <li><strong>share - from any app to any other app ?</strong></li> <ol> <li>share ing = email, facebook, twitter ?g+, pinterest, stumbleupon, ? ...</li> <li>EX = news story, photo,</li> </ol> <li><strong>side by side</strong></li> <ol> <li>twitter timeline(side) + newsreader(main)</li> </ol></ol> <li><strong>[29:00] ...some EXAMPLE APPS</strong></li> <ol> <li>] newsreader by bing -</li> <li>] usa today</li> </ol> <li><strong>[31:00] the five design principles and what they meant to the windows team</strong></li> <ol> <li>] do more with less - aka "fierce reductionism"</li> <li>] authentically digital -</li> <li>] pride and craftsmanship</li> <li>] fast and fluid</li> <li>] win or lose as one&nbsp;&nbsp;</li> </ol> <li><strong>[32:00] PRINCIPLE 1 - do more with less&nbsp; - EXAMPLES</strong></li> <ol> <li>] Tiles = launcher , switcher, gadget, dashboard&nbsp;(all of these things ), all with one thing</li> <li>] OLD = plug in or find another power source&nbsp;VS NEW plug in your PC</li> <li>] settings&nbsp;- aka control panel - now headings only, no descriptions&nbsp;</li> <li>] blue screen - OLD=verbose, NEW=minimalisty</li> </ol> <li><strong>[37:00] PRINCIPLE 2 - authentically digital </strong></li> <ol> <li>] skeuo morphism - a design object in its digital realm, should look like its realworld counterpart, a clock should look like a clock,</li> <ol> <li>viewpoint - its gone too far, ex apple bookshelf, faux leather in find people, calendar, effects have gotten overblown</li> </ol> <li>] w8 - using - glyphs ("easily recognizable", "way finding signs") &amp; clean typography</li> <li>] w8 apps - content is the king, NOT the chrome (menus, toolbars, ...)</li> <li>] w8- apps - you get to the chrome, the same way in all apps</li> </ol> <li><strong>[40:00] APPS that exemplify this ...</strong></li> <ol> <li>] usa today - newsreader</li> <li>] world weather map&nbsp;-</li> <li>] xbox video -</li> <li>] my history digest&nbsp;- typography] weather - broadcast quality</li> </ol> <li><strong>[47:00] PRINCIPLE 3 - pride and crafstmanship</strong></li> <ol> <li>] getting the little details perfect, ms created a special font for the word "start", so it would look perfect in all languages, sizes,</li> <li>] when you pan your start screen tiles, the edges are going to line up with the start name</li> </ol> <li><strong>[] EXAMPLE APP - cocktail flow</strong></li> <ol> <li>] broadcase quality digital experience</li> <li>] underlying grid template for app developers to get consistency across apps</li> <li>] caring about every, every, every, ... detail</li> <li>] OOBE experience, blue flash example ...&nbsp;&nbsp;</li> <li>] because we cared enough about sweating the smallest details</li> </ol> <li><strong>[53:00] PRINCIPLE 4 fast and fluid</strong></li> <ol> <li>] a feeling, graceful, organic and human - 3 KEYS &nbsp;speed and responsiveness, animations, touch language,</li> </ol> <li><strong>[00:00] PRINCIPLE 5 win or lose as one</strong></li> <ol> <li>]</li> </ol> <li><strong>[57:25] 7 gestures = </strong></li> <ol> <li>] press&nbsp;and hold = learn</li> <li>] tap=primary action,</li> <li>] slide=drag</li> <li>] swipe=select</li> <li>] swipe from edge = ui, &nbsp;</li> <li>] pinch to zoom =</li> <li>] rotate=rotate&nbsp;&nbsp;</li> </ol></ol> <p>&nbsp;</p> <h2>[REFERENCE]</h2> <ol> <li>] where did we get information about [what]</li> </ol>