TOPlist

I mimozemšťani by používali hamburger menu, tvrdí bývalý designér mobilních Office aplikací

Zajímá vás, proč aplikace Microsoft Office na mobilních telefonech vypadají tak, jak vypadají? Proč používají nepopulární tlačítko hamburger? Jak by také mohly vypadat? Bývalý zaměstnanec Microsoftu a designér aplikací Word, Excel a PowerPoint William van Hecke popsal příběh tvorby vzhledu mobilních Office pro Windows 10 (Mobile) na stránkách Design Explosions.

Pokud vedle sebe srovnáte vzhled Office Hubu z Windows Phone a samostatných Office aplikací na Windows 10 Mobile, uvidíte na první pohled, že nezůstal kámen na kameni. Důvodů je pochopitelně více, avšak tím největším je systém Windows 10 a univerzalita aplikací, které mají být určeny jak pro mobilní telefony se 4″ displejem, tak pro obrazovky s úhlopříčkou 40″. Již předem navíc bylo jasné, že smartphony s Windows umět pracovat s klávesnicí, myší a externím displejem, a že rodina zařízení Surface má ambice nahradit jak tablet, tak počítač.

word

Práce pro 300 lidí

Situace na startovací čáře tak nebyla vůbec jednoduchá, navíc před Windows 10 pracovaly na Office pro počítače a Office pro smartphony dva zcela nezávislé týmy a každý z nich řešil otázku designu zcela po svém pro danou skupinu zařízení. Do toho navíc ještě později vstoupily konkurenční platformy Android a iOS, které rovněž řeší rozložení prvků po svém, a jejich týmy se navíc nacházely v různých koutech světa. Celkem bylo zapotřebí zkoordinovat práci zhruba 300 lidí, avšak úkol od tehdejšího ředitele Microsoftu Steva Ballmera zněl jasně – první a nejlepší Office dostane platforma Windows.

peopleTým lidí pracujících na Office byl velmi široký

Tři sestry

Designový směr nových Office aplikací byl řešen ve třech větvích, které se jmenovaly Norma, Tabitha a Solana, každý z těchto směrů byl pochopitelně odlišný.

Norma

Norma bylo původní rozvržení prvků z Office Hubu ve Windows Phone 8.1, avšak již od začátku bylo jasné, že tímto směrem se jít nedá, protože stará verze Office obsahovala asi 10 položek menu, zatímco nová Office jich potřebovaly stovky.

norma

Tabitha

Druhý směr uvažování je nejpodobnější současné ostré verzi, kdy se jednotlivé položky pásu Ribbon nacházejí v rozbalovacím seznamu vlevo při spodním okraji displeje.

tabitha

Solana

Poslední směr byl poměrně divoký a neobsahoval nic, co dva předchozí – Solana měla všechny funkce ukryté pod třemi tečkami vpravo dole a všechny ovládací prvky měly svůj vlastní design, což na první pohled působilo dosti zmateně.

solana

Každý z výše uvedených směrů měl něco do sebe, a tak došlo k jakémusi spojení všech nápadů do jednoho, přičemž filosofie ovládání byla nejvíce podobná právě směru Tabitha.

real

Sjednocení s Windows 10

Kromě postupné spolupráce s vývojovými týmy Office pro Android a iOS bylo také zapotřebí dodat novým Office tvář pro velké displeje. Bylo nutné zvážit mnoho aspektů – pokud by byly ovládací prvky na zejména tabletech při spodní straně obrazovky, překážely by virtuální klávesnici. Naopak pokud by byly na smartphonech při horní straně, po vysunutí klávesnice by nezbylo žádné místo pro obsah. Z tohoto důvodu padla volba na současné řešení – u smartphonů jsou ovládací prvky dole, u počítačů a tabletů se nachází standardní pás karet Ribbon v horní části obrazovky.

prvky

Kam s akčními tlačítky?

Samostatnou kapitolou byla tzv. tlačítka Hero Action, tedy zpět, vpřed, náhled apod., která by měla být jak na malých, tak na velkých displejích okamžitě dostupná.

hero buttons

Nejprve se na smartphonech uvažovalo o jejich umístění při horním okraji displeje, avšak pro tyto účely by musel vzniknout nový pás, ubírající prostor samotnému obsahu. Z tohoto důvodu došlo jejich přemístění napravo od rozbalovacího seznamu jednotlivých karet funkcí.

hero buttons2

Toto místo se zdálo býti vhodné, avšak do hry vstoupil další problém – tlačítko Soubor, seskupující seznam naposledy otevřených dokumentů, přistup k adresářové struktuře, apod. Na tabletech je možné všechny položky umístit na jednu obrazovku, ale u smarphonů by byla situace složitější, neboť podle zvolené logiky by se měly všechny položky karty Soubor nacházet při spodním okraji displeje podobně jako ostatní nabídky formátování. První náhledy však nevypadaly příliš použitelně.

soubor mobile

I když se tým designerů snažil zabránit přidání pásu funkcí k hornímu okraji displeje, nakonec mu nezůstala jiná možnost. Nově vzniklý prostor se tak stal domovem jak pro akční tlačítka, tak pro menu Soubor, který reprezentuje nepříliš populární tlačítko nazývané Hamburger. Tento pás se však zobrazuje pouze tehdy, není-li otevřena klávesnice nebo editační funkce.

Mimozemšťani používají ve svém softwaru hamburger menu

Pochopitelně tlačítko hamburger vyvolává hodně emocí, zvláště pak na mobilních Windows, kde na něj uživatelé nebyli zvyklí. Bohužel kvůli responzivnímu designu bylo nutné k tomuto kroku sáhnout, ač sám William van Hecke tvrdí, že pokud není vážný důvod, nemělo by být hamburger menu používáno. Pokud však potřebujete zejména na malých displejích umístit hodně (méně důležitého) obsahu na jedno místo, jedná se o nejvhodnější řešení.

hamburger

Pokud prý existují mimozemšťané a používají software, určitě používají nějakou formu tlačítka, které jasně dává najevo, že po stisknutí se objeví další možnosti. Jiná cesta jak dostat spoustu obsahu na malý displej prý v celé galaxii neexistuje.

Kontextová menu

Kancelář Office v systému Windows Phone nenabídla žádné pokročilé možnosti vkládání obsahu při dlouhém podržení prstu v libovolném místě textu, pouze při označení slova či věty se zobrazila kruhová ikona pro kopírování. Uživatelé přitom byli z počítačových Office zvyklí na podrobnější práci s textem, a tak byla vytvořena minimalistická nabídka s několika základními funkcemi; bohužel nebyla příliš vhodná při používání v režimu na šířku.

submenu2

Práce s kopírováním a vkládáním obsahu navíc není tak jednoduchá, jak se zdá, neboť se nejedná pouze o text, ale například o obrázky či tabulky a jejich buňky, tudíž vyvstává problém během kopírování napříč aplikacemi a systémem. V Redmondu nakonec celý systém změnili tak, aby bylo možné mezi jednotlivými aplikacemi kopírovat prakticky cokoliv, nikoliv pouze text. Kontextové menu nakonec tvoří jednoduchý řádek bez ikon, který v režimu na šířku nezabírá tolik prostoru.

real2

Vzhled Office aplikací pro Windows 10 nakonec znamená velký odklon od původního Office Hubu na Widnows Phone 8.1, avšak nové aplikace nabízejí mnohem více funkcí a dokáží se přizpůsobit libovolné velikosti displeje. Verze pro iOS a Android vypadají mírně odlišně, avšak položený základ a logika ovládání zůstávají stejné.

Pokud vás zajímají další úskalí při jejich návrhu, přečtěte si originální příspěvek na webu Design Explosions (v angličtině).

Autor článku Jakub Karásek
Jakub Karásek
Příznivec mobilních technologií, konvertibilních zařízení a bezdrátového nabíjení, fanoušek tvrdé hudby a milovník rychlé jízdy v motokárách, na kole a na lyžích. Odpůrce FUPu, pomalého internetu a přerostlých smartphonů.

Kapitoly článku