Thursday, August 5, 2010

Een kijkje achter de schermen kijken naar het ontwerpen van de nieuwe Hotmail: deel twee

Een kijkje achter de schermen kijken naar het ontwerpen van de nieuwe Hotmail: deel twee: "

In het eerste deel van deze serie over het ontwerp-proces voor de nieuwe Hotmail, ik noemde het zeer belangrijke rol speelt dat de feedback van gebruikers en gebruikers gewezen op de principes die we gebruiken om onze beslissingen die leiden tot zinvolle, detecteerbaar verbeteringen voor. Nu de nieuwe Hotmail is vrijgegeven aan de hele wereld , ik wilde hem een kijkje op en delen onze gedachten over de iteraties dat ging in het creëren van een aantal van de nieuwe functies.

Helpen gebruikers schoon de rommel en belangrijk vinden mail snel

In de nieuwe Hotmail, wilden we maken het gemakkelijk om e-mail te doen "triage." Dat is wat we het proces van het beheren van e-mail - het verwijderen van de spullen die je niet wilt bellen, verschroot de dingen die glipte door spam filters, en het wegzetten van belang spullen die je wilt bewaren.

Een paar eisen die we voor ogen houden:

  • One-click toegang tot belangrijke berichten (bijv., "vindt de lijst met contacten", "van sociale netwerken", enz.)
  • Snelle manieren voor drukbezette mensen om rommel te verwijderen uit hun inbox

We werkten met verschillende concepten voor de vaststelling precies wat we wilden doen. Hier zijn enkele van de degenen die we uitgeprobeerd.

Vroege Concept 1: Het maken van een leuke interactie door de invoering van de filters zoals knoppen aan de bovenkant van de lijst met berichten

In dit concept zou de grote knoppen is de manier waarop je zou "show" of "verbergen" e-mail in de verschillende categorieën. Hoe is het doen? Nou, in user testing, mensen vonden het kostte te veel ruimte en vereist te veel interactie. Het was een soort van leuk om te gebruiken, maar we hoorden opmerkingen als "onhandig" en "belastend", die duidelijk niet passen bij wat wij proberen te doen.

Filters, take one

Early Concept 2: Het doen van iets meer verwacht door de invoering van de filters als schakels in de berichtenlijst

In dit concept, eenvoudige koppelingen in het bericht lijst zou toestaan van een-klik-filtering. Wij beëindigden omhoog gooien dit concept op, omdat het was vrijwel onmogelijk om een multi-gefilterde weergave met behulp van dit model (niet super nuttig voor triage-modus) te krijgen. Niet alleen dat, maar het toevoegen van deze links om iedere post in de lijst met berichten zou de beschikbare ruimte verder te verlagen voor meer belangrijke dingen, zoals de naam van de afzender en het onderwerp van het bericht. Niet goed.

Filters, take two

Mid-Proces Concept 3: Het verkleinen van het naar beneden met split dropdowns voor de filters

De benadering die hier laat zien waar we waren halverwege onze ontwerp-en onderzoeksproces. "Split dropdowns" zijn wat we iets dat twee-gedrag kon je klikt u op "Contacten" en filteren op een contacten, is of je kan klik op de pijl en je ziet een dropdown menu met andere opties te bellen. Om nemen minder ruimte in, de filters zijn gegroepeerd in twee categorieën: "concepten" (bv. "Uit contacten", "van sociale netwerken", enz.) en "status" (gelezen, ongelezen, vlag, etc.). Echter, dit ontwerp gewoon niet mogelijk voor de one-click toegang. Terug naar de tekentafel ...

Filters, take three

Mid-Proces Concept 4: Dumping dropdowns en het maken van de filters in de eenvoudige tekst-links op de top van de lijst met berichten

Een andere optie die we verkend was gewoon wegdek alle filters als tekstlinks standaard. We testten deze mooie uitvoerig in usability sessies (evenals in een longitudinale studie over meerdere maanden) en vond dat, aangezien het filter links rechts uitgelijnd waren, waren ze vrijwel onzichtbaar. Dat ging ook niet passen bij de factuur.

Filters, take four

Finale: Om het allemaal samen, met de filters als tekst links (links uitgelijnd) op de top van de lijst met berichten

Dus hier is waar we landden. We haalden de blauwe link behandeling, afgestemd op hen verlaten (ten koste van onze sorteer-functionaliteit, die gemigreerd naar de minder zichtbare uiterst rechts pictogram). We hebben ook dit beoordeeld in usability testing en vond dat, zodra mensen in wisselwerking met de filters, het was hen duidelijk hoe de filters gewerkt, en na verloop van tijd groeiden ze van hen te houden. Boom! Doel bereikt: een makkelijke manier om opdelen van de lijst met berichten voor het snel het beheren van uw e-mail.

Filters, take five. And... scene.

Hotmail de navigatie en de algehele UI

Een van de beginselen moeilijker te sorteren is het idee dat verandering slecht is, tenzij het is geweldig. Om tegemoet te komen van alle nieuwe functies die we willen toevoegen, maar we wisten dat we naar de algemene "wrapper evolueren" (dat is wat we de buitenste randen van de Hotmail-interface aanroepen). Maar we wilden niet iedereen desoriënteren.

Een van de eerste plaatsen waar we begonnen was de linker navigatie. We wisten dat we wilden de linkernavigatiebalk in Hotmail te maken, zoals de linkernavigatiebalk in Windows Verkenner voor Windows 7 werken. Dit doel is moeilijk te bereiken, maar het maakte zin om ons, om uw totale Windows-ervaring te laten voelen consistent.

Vroege concept

Vroeg op, verkenden we de plaatsing van de vermelding 'zoeken' box in de linkernavigatiebalk gebied. Wij hebben ook de "tandwielen" (die open kleine panelen voor acties als "Mappen beheren") standaard zichtbaar. Gezien onze wens om afleiding te verminderen, gingen we het maken van de tandwielen alleen zichtbaar wanneer u de muis in de buurt te verplaatsen. Dat maakte het moeilijker ze te vinden, maar de interface opgeruimd. Een andere beslissing die we gemaakt vroeg was om het actief e-mailadres te verwijderen. Hierdoor kon de bovenkant van het blauwe vak rond "Inbox" om mooi te worden aangepast aan de box rond de berichtenlijst.

Left navigation area, early concept

Definitieve beslissing

Later in het proces, hebben we besloten om te zoeken verplaatsen uit de linkernavigatiebalk aangezien ze niet echt veel ruimte hebben om te typen. We geherlabeld "Contacten" naar "Messenger" omdat we wilden er zeker mensen wisten dat dit niet gewoon een lijst met contactpersonen voor het versturen van e-mail - het is een manier om te beginnen IM'ing zijn!

Left navigation area, final

Conversatie threading (heen en weer gesprekken in e-mail)

Zoals we begonnen te werken aan discussielijnen we veel aandacht besteed aan hoe je Gmail, Outlook, en natuurlijk onze zus product, Windows Live Mail , de functie behandeld. We hebben allemaal afgesproken dat geen van deze modellen optimaal waren voor de Hotmail-ervaring. We wisten dat we een ontwerp dat zou kunnen gebruikers verschillende boodschappen te begrijpen in een draad nodig draai rijgen aan / uit gemakkelijk, en instorting ongelezen berichten in een elegante en intuïtieve manier. We hebben ook bewust waren van het feit dat discussielijnen zou nieuw zijn voor veel mensen. Dus we wilden iets dat volledig zou zijn in een oogopslag duidelijk.

Vroeg op, we dachten over e-mail conservations dat het meer op instant messaging, met tekstballonnen:

Conversations as message bubbles

Het probleem met luchtbellen is dat zij de totale breedte beschikbaar om het bericht te beperken, dus probeerden we een andere aanpak. Om elke doos 'gevoel' als een persoonlijk bericht, en zetten we een grote ol 'Ongelezen gele envelop aan de top. We hebben ook nog een "show-bericht geschiedenis" als een manier om een brug te bouwen om de vorige berichten in het gesprek en begon te verkennen waar de acties plaats om te antwoorden.

Unread envelope and show message history

De volgende afbeelding laat zien waar we waren naar het einde van het proces, toen wij nog onderzoeken waar het antwoord acties te zetten. Hier hebben we deze acties naar de top. We vonden het te sluiten, maar een van de grootste stukken van de feedback mensen in onze studies gebruiker vertelde ons was: 'He, als ik een lang bericht heb, ik heb de hele weg naar de top scrollen om te reageren. "Het betreft ongeveer klanten zien waar elk afzonderlijk bericht dat begint en eindigt zijn iets wat we moesten zorgen.

Reply actions at the top

Na deze, zijn we verhuisd het antwoord acties om zowel de commando bar en de onderkant van elke pagina. Om gebruikers te helpen beantwoorden aan afzonderlijke berichten, is ook voorzien in een "acties" pull-down menu in elk bericht.

Finally, reply actions at the top and the bottom

De grootste problemen die we geconfronteerd-pauzes tussen de berichten, de plaatsing van het antwoord van acties en algemene lay-out-vereiste uitgebreide iteratie, de behandeling, en de feedback van klanten.

Kan gesprekken worden de standaardweergave voor alle Hotmail-klanten?

We vroegen onze longitudinale studie naar de deelnemers of ze wilde het bestaande "een regel per bericht te gebruiken in de inbox"-benadering of een groep berichten door gesprekken. Dat wil zeggen, "moet iedereen op Hotmail-berichten te zien gegroepeerd door gesprekken standaard?" We verzamelden feedback na 7 dagen, 45 dagen en 90 dagen, en hier is wat we hoorden ze zeggen:

Popularity of conversations trended downward over time

Onnodig te zeggen, deze vertelde ons dat we waarschijnlijk niet in te schakelen voor iedereen. Het was veelbelovend op het eerste (72% "ja" gezegd), maar na verloop van tijd gleed geleidelijk naar beneden van 58% tot 51% de laatste keer vroegen we, dus we links "gesprekken" als iets dat elke individuele gebruiker kan schakelen.

Deze functies nam veel tijd om precies goed te krijgen, en ze vertegenwoordigen een veel hard werk. Onnodig te zeggen, we zijn blij met de manier waarop ze kwam naar buiten, en afgaand op wat we gehoord en de hele weg door ons design proces, we denken dat je het ook wilt.

Ik hoop dat je deze blik op het prachtig hoe en waarom we doen wat we hier doen op Hotmail. Deel drie zal spoedig komen, met een blik op wat meer van het plezier en super handig dingen die we samen hebben voor u samengesteld. Check snel terug.

Michael Kopcsak - Senior Lead User Experience, Windows Live

"

No comments: