Okamžitý redesign mobilních aplikací a iOS. První koncepty pro aktualizace vzhledu byly zveřejněny na oficiálním blogu VKontakte, ve kterém Knyazev mimo jiné hovořil také o práci designérů ve společnosti.
V klientech a iOS se opět objeví lišta karet – jedna navigační lišta s kartami ve spodní části obrazovky, která pokrývá hlavní funkce. Mimochodem, návrháři sociální sítě ji opustili v roce 2012. V nové vizi designu obsahuje lišta hlavní sekce VKontakte: „Novinky“, „Vyhledávání a doporučení“, „Zprávy“, „Oznámení“ a uživatelské menu. Boční menu, soudě podle zveřejněných screenshotů, bude v redesignu aplikace zcela odstraněno.
Kromě radikálně nového uživatelského rozhraní přidají návrháři VKontakte s nadcházející aktualizací vzhledu několik funkčních inovací. V sekci „Vyhledávání a doporučení“ se objeví obdélníkové příběhy od blízkých uživatelů a také zdroj potenciálně zajímavých příspěvků od nových autorů. Vedoucí designér VKontakte popisuje novou sekci jako „takovou lepkavou věc, kde můžete najít něco vysoce kvalitního a neznámého, s přihlédnutím k osobním preferencím“. Do news feedu bude přidáno počítadlo zhlédnutí (v současnosti se zobrazuje pouze při otevírání příspěvku) a lajky se zbarví červeně.
Kdy vyjdou aktualizované?
Runet je chudý na recenze redesignů známých stránek a služeb. Tento článek není o tom, jak to napravit. Mým cílem je prodiskutovat s komunitou řešení jednoho z problémů webové verze VKontakte.
V loňské soutěži na redesign VK autoři soutěže zmiňovali problémy webové verze. Za problém číslo jedna označili úzkou šířku webu. Souhlasím s týmem VKontakte a rozhodl jsem se vytvořit vlastní řešení pro boj s tímto problémem.
Bolest
Problém č. 1 - Úzká obrazovka
Kromě šířky obrazovky jsem identifikoval ještě 2 problémy.
Problém č. 2 – Jiný styl webové verze a aplikací
Problém č. 3 - Messenger
Messenger se na VK objevil relativně nedávno. Jeho první verze byla znatelně nemoderní a postupem času se to vyřešilo. Hlavní problém messengeru je podle mě v tom, že žije paralelně se stránkou. Korespondenční okno je malé. A přestože je škálovatelná, je vázána na absolutní souřadnice – není vhodné službu využívat. Na Facebooku také messenger žije odděleně od webu a vytváří mnoho malých korespondenčních oken.
Teorie - způsoby, jak se stát širší
Pojďme se nejprve rozhodnout, co je to úzká obrazovka. Aktuální šířka VC je 791ks. Soutěžní úkol říkal přizpůsobit web na rozlišení 1024pk. Jak vidím, řešením problému úzké obrazovky bude rozhraní, které pracuje v rozlišení 1024-1600ks. To znamená, že rozhraní je schopno pracovat jak v úzkém (1024pk) rozlišení, tak v širokém (1440+pk).1. Fyzický strečink
Řešení je přímočaré – uděláme web gumovým.
Klady:
+ Snadná implementace
mínusy:
− Obsah se stane nečitelným
− Je nutné kompletně přepracovat některé části webu (například přátelé)
2. Paralelní prezentace
Technika byla viděna v konceptu redesignu Facebooku iA z roku 2006 – komentáře jsou umístěny vpravo od příspěvků. Před 5 lety jsem to zkusil na jednom ze svých projektů.
Klady:
+ Příspěvky jsou uspořádány lineárně, aniž by byly přerušovány komentáři
+ Komentáře k příspěvkům jsou viditelné okamžitě bez dalších přechodů
mínusy:
− Nerovnoměrná hustota informací na obrazovce
− Verzi pro 1024ks lze vytvořit velmi obtížně nebo je nucena se od široké lišit
− Je nutné kompletně přepracovat některé části webu
3. Posuvné panely
Přístup, který se stal populárním ve webových službách: SRM systémy, správci úloh. Obrazovka se skládá ze závislých panelů. Panely se zobrazují napravo od sebe, pokud obrazovka neobsahuje vše, pak jsou levé panely skryté, jak se zobrazují pravé.
Klady:
+ Při malých rozlišeních můžete přepínat panely, při velkých rozlišeních můžete zobrazit vše najednou
+ Podobnost rozhraní s verzí pro tablety
mínusy:
− Možnost, kterou uživatelé webu neznají
− Stránka není umístěna uprostřed obrazovky, ale vlevo
− Velký objem architektonických prací
− Žádné lineární prohlížení, abyste si mohli přečíst komentáře, musíte kliknout na zprávy
4. Dvě okna
Rozhraní se dvěma aktivními pracovními sekcemi na obrazovce.
Klady:
+ Vyžaduje několik změn v aktuálním rozhraní
mínusy:
− Není jasné, jak pracovat se 2 režimy současně a proč
5. Dva sloupce
Režim zobrazení informací je podobný časové ose na Facebooku. Koncept založený na této možnosti je vyhrál v soutěži VK redesign.
Klady:
+ Snadné uspořádání informací
+ Jednotná hustota dat na obrazovce
mínusy:
− Rozdělená pozornost při čtení zpráv
− Facebook
6. Karty
Přechod od vertikálního vyprávění k mřížce. Příklad - Pinterest.
Klady:
+ Snadno se přizpůsobí libovolnému rozlišení
mínusy:
− Obtížné vnímat obsah (obtížné se znovu naučit)
− Je nutné kompletně zrevidovat všechny části webu
Mým řešením je praxe
Své řešení jsem založil na 4. přístupu: obrazovka se dvěma aktivními okny. Druhé okno je posel. To vám umožní chatovat při čtení zpráv. Bez použití 2 karet prohlížeče.
Na malém (<1440пк) экранах окно чата сворачивается.
V případě potřeby se otevře nad hlavním obsahem. Scénář chatování při čtení zpráv funguje stejně.
Samotný uživatelský panel s nejnovější korespondencí zůstává na obrazovce ve všech částech webu:
Podrobnosti ze zákulisí
Pokud se pozorně podíváte na snímky obrazovky, můžete vidět další změny v rozhraní:
1. Pozadí. Pro zvýšení kontrastu bloků bylo přidáno pozadí.
2. Rozdělení do bloků. Posty byly rozděleny do samostatných bloků.
3. To se mi líbí se posunulo nahoru. Možná nejkontroverznější změna a pravděpodobně si zaslouží samostatnou diskusi.
4. Předchozí horní nabídka zmizela. Všechny jeho funkce již byly duplikovány v částech webu. Na jejím místě byla úroveň karty. Tak bylo možné snížit jedno plavební patro. Filtry (zřídka používaná položka) se přesunuly do rozevíracího seznamu. Chybí další navigační patro.
5. Dva režimy pro prohlížení přátel. Jeden je vypůjčený z webové verze, druhý z tabletu. Těžko posoudit, co je oblíbenější a pohodlnější.
6. Osobní poznámky. Objevil se blok osobních poznámek o každém příteli. Pokud se vám to líbí, získejte to zde - VK Memos.
7. Webové hovory. Byly již ve VK dříve, ale byly vyrobeny jako samostatný režim provozu. Nyní se jedná o neviditelnou funkci, která nenarušuje základní surfování a komunikaci.
Místo dovětku
Je možné předělat sociální síť bez prototypu uživatelské stránky?Aktuální verze je přeplněná informacemi: hudba, videa, skupiny, veřejné stránky, fotografie, fotky na mapě, fotoalba, přátelé, společní přátelé, online přátelé, odběratelé... Rozhodl jsem se odříznout všechny nepotřebné věci:
To je vše, děkuji za pozornost.
Všechno je špatné
Tento redesign hodnotím jako nepříliš profesionální: příliš mnoho důležitých funkcí webu bylo zhoršeno, než bylo, a drobnosti, které web doplňovaly a odlišovaly, byly odstraněny nebo přeměněny v odpad.
Redesign se vyplatilo zavádět postupně
Udělalo se hodně práce a to je pochopitelné: všechno restartovali najednou, což je zásadně špatně. Bylo by lepší aktualizovat stránky po částech, jako to dělá Facebook. Uživatele je přeci potřeba připravit na něco nového, nové věci je potřeba po částech testovat a následně na základě zpětné vazby postupně spouštět.
Nahoře přibitá modrá rakev
Pevné záhlaví lze takto vytvořit, pokud obsahuje důležitý obsah. Nyní v něm není nic, kromě vyhledávání a ikony nahrávání zvuku, pevná pevná rakev, která ruší.
Stránka se zprávami se zúžila a byla nepřehlednější
Fotka se začala otevírat jako na Facebooku
Top 5 méně nápadných nedostatků
Implicitní pro oči, ale zřejmé pro mozek. Zde jsou ty klíčové.
- Piktogramové ikony v nabídce
- Světle šedé pozadí, které odebralo čistotu staré verze
- Levý sloupec v profilu je při posouvání pevně daný a neumožňuje roztažení novinek na celou šířku povoleného obsahu (jako tomu bylo ve staré verzi)
- Nové logo se nevejde do záhlaví a vytváří ještě více prázdného místa
- Indikátor mé aktivity (online) v mém profilu! To je hrana logiky! Vedle jména mého profilu je nejen textový indikátor, ale nyní je tam i zelený kroužek
Nejotravnější věc pro uživatele
Je to opravdu tak špatné? Alternativní znalecký posudek
Viktor Kozyrev
UX designer ve společnosti Frog Design, Badoo and Cogniance; tvůrce aplikace Spender
„Možná mnoho lidí očekává radikálnější a agresivnější kroky v designu od velkých společností, ale podle mého názoru se VKontakte vydal pragmatickou cestou a vyřešil konkrétní problémy. Výrazný je nový vizuální styl, který se rozhodně stal modernějším a příjemnějším. Přepracována a zjednodušena byla také navigace. Nyní vše vypadá stručněji a snáze se to vnímá. Typografie je elegantní, čistá a kontrastní a zajišťuje pohodlný zážitek pro většinu uživatelů.
Písmo VKontakte, které uživatel vidí, závisí na jeho verzi operačního systému a prohlížeče (uživatelé iOS uvidí písma San Francisco a uživatelé Androidu Roboto). Díky použití systémových písem dostává uživatel téměř důvěrně známý, a tudíž nenápadný, pohodlný vzhled a dojem.
Měli byste se připravit na to, že většina publika bude v každém případě rozhořčena, bez ohledu na povahu změn. To je pochopitelné: průměrný uživatel nemůže vždy okamžitě posoudit potenciální přínosy změn. Ale nepohodlí ze ztráty známého vybavení je cítit okamžitě. Ne proto, že by stará řešení byla tak dobrá, ale proto, že jsou na ně lidé zvyklí. To vysvětluje psychologie. Většině publika bude vadit už v zásadě samotný fakt redesignu. A důvodem může být jakýkoli detail, který nejvíce vyčnívá: někdo si všimne rozdílu v písmu nebo ikonách a někdo bude nové navigaci vyčítat.
Osobně nejsem příznivcem třísloupcového uspořádání a pokusil bych se jej zjednodušit, aby se stránky lépe četly. To platí zejména pro uživatelský profil. Stránka se zdá být přetížená, vizuálně homogenní a postrádá správně umístěné vizuální akcenty. Navzdory většímu počtu podobných řešení vypadá VKontakte stále čistěji a moderněji a rozhraní je lépe vnímatelné.“
Pokud stále chcete vrátit starý design VKontakte, stáhněte si rozšíření prohlížeče Stylish. Po jeho instalaci je třeba otevřít stránku stylu pro starý design sociální sítě, kliknout na tlačítko „Instalovat se stylovým“, potvrdit volbu nového stylu a restartovat prohlížeč.
Napsat o novém designu? No konečně!
!!! Pozornost!!! Obecně hned upozorňuji, že design hodnotím nejen jako uživatel, ale i jako designér (včetně těch, které se týkají webu) a budu psát hodně nejen o designu samotném, ale i o tom, proč je jich tolik nespokojený. A bude mnoho dopisů!
O tom, proč je všechno tak neobvyklé:
Jakmile byl prvního dubna (což způsobilo, že všichni velmi pochybovali o vážnosti aktualizace) k dispozici nový design s omezeným beta testováním, okamžitě jsem šel na blog VK a připojil se. Poté jsem začal přeskakovat všechny sekce a sledovat, co se děje. Hned první den jsem našel asi pět chyb, které jsem hned poslal do administrace k opravě. Jediné, co nebylo opraveno, je, že to považují za logické (to, že nemůžete poslat obrázek kamarádovi, třeba z komunity nebo feedu, a pak ho uložit do alba. Logika je taková, že říkají, že jsi to poslal sám, tak proč to ukládat), ale tato věc byla v minulém designu.
Poté jsem do své komunity zveřejnil shrnutí redesignu a hlasování. Začalo být zajímavé, jak budou reagovat první uživatelé. Většina si stěžovala, že nemohou najít některé funkce, například přepínač ve zprávách (který lze snadno najít, když najedete myší přes okraj dialogového okna). Ano, takové prvky rozhraní jsou velmi neobvyklé ve srovnání se vším, co se v poslední době v RuNetu stalo. S novým designem to ale není problém. To je problém s designérským myšlením, které se v RuNetu objevilo v posledních letech. Velmi zřídka vytváříme progresivní a dobré (!) návrhy, které se stávají pohodlnějšími a vyvíjejí se hladce a rovnoměrně, což umožňuje uživateli zvyknout si na nové prvky, které jsou z hlediska UX intuitivnější a správnější (uživatelská zkušenost je součástí rozhraní design, který je zodpovědný za uživatelskou přístupnost a pohodlí). Místo toho tu máme ostré hroty u nejprogresivnějších vývojářů, které vyvolávají vlnu nepochopení ze strany uživatelů. A to vše na pozadí velkého množství stránek s hrozným designem, který je nepohodlný, ale jednoduše známý. A to vše proto, že webové stránky jsou obvykle vytvářeny buď levně, nebo podle zásady „takto to dělají“. Ti, co mají potenciál a umí dělat pokroky, prostě nepracují za peníze, které se nabízejí na RuNetu, a jdou dělat dobrou a drahou práci pro cizí chlapy. To vše je velmi smutné, a proto představení nového designu VK připomíná křest Rusa. Ale po chvíli si na to uživatelé zvyknou, zapamatují si, kde se co změnilo, a pochopí, že všechno není tak špatné.
O tom, že „sekej pro Facebook, no, aspoň máš feed bez cizích lajků!“
Faktem je, že design se vyvíjí a zatím je považován za optimální, čemuž se také říká design forem a obsahu. Byl vyvinut nedávno společností Google a mnoho lidí si to vzalo.
Vše v něm stojí na proporčních prvcích a akcentech, díky čemuž je v šikovných rukou vývojáře velmi jednoduchý a srozumitelný. Všechny tyto panely s profilem, které se například v aplikacích vysouvají vlevo, to je vše.
Připomeňme si, jak vypadaly stejné telefony před 10-15 lety. Každý model Nokie byl něčím úplně novým: všechny ty posuvné panely, výklopné obrazovky do všech stran, nejšílenější rozložení klávesnice – to vše bylo velmi cool. Zároveň si nepamatuji žádné stížnosti na nepochopení nových produktů, všechno bylo tak nové, zajímavé a cool!
Ale s postupem se vše sešlo do jednoduché desky s tlačítkem nahoře a dvěma na boku (nebo třemi na zadní straně jako LGE). Nyní je produkt buď jako někdo jiný, nebo nový a nesrozumitelný. Nyní nemá smysl znovu vynalézat kolo, zvláště pokud bude méně pohodlné než to, které již existuje. Je to tak, že design zařízení a rozhraní, webdesign se nyní dostaly do optima a je stále obtížnější je dělat lépe. Velcí výrobci nejsou tak hloupí, aby se navzájem kopírovali, jsou tak chytří, že akceptují pravidla určující pohodlí a konečně dospěli ke společné koncepci.
Totéž platí pro design sociálních sítí. To poslední, co vývojáři chtějí, je říct, že ukradli design. Ne. Nikdo vás nebude soudit, když si vyrobíte židli podobnou tisícům jiných židlí. Ikea to dělá: vyrábí bolestně banální, ale jednoduché a dobré věci. V čem je tedy problém webdesignu?
Nyní je zde moje subjektivní „přemýšlení“ o nejnovějším VK:
Zlepšilo se. To je pravda. Stará verze se změnila tak málo, že to vypadá spíše jako stará tematická fóra z roku 2000 než jako moderní sociální síť. Nyní má mobilní verze a aplikace se stránkou mnoho společného. To je úžasné. Vzniklo mezi nimi logické spojení. Tito oškliví vícepříběhové půlstránkové avataři s „Odebírat“ a tak dále z komunit zmizeli. Nyní můžete zkontrolovat oznámení kliknutím, aniž byste opustili stránku, jsou to jen lajky a odpovědi, nikoli sloupec pro samostatné rozjímání. Fotografie s odpověďmi se nyní při otevření vzájemně doplňují, než aby se donekonečna snižovaly.
O zprávách: Hodně komunikuji na VK (5-20 dialogů denně) a tento nový formát mi dělá velkou radost. Kdo není spokojen, může snadno přejít na starý formát kliknutím na ozubené kolo ve spodní části obrazovky a změnou nastavení. Každý by měl být šťastný, ne?
Zároveň souhlasím