Jak zvládnete výzvu navrhování nemovitostí pro velké obrazovky?
Tato otázka je trochu subjektivnější, ale doufám, že se mi podaří získat nějakou novou perspektivu. Jsem tak zvyklý navrhovat určitou velikost obrazovky (obvykle 1024x768), že shledám, že tato velikost není problém. Rozšíření velikosti na 1280x1024 vám nekupuje dostatek nemovitostí na obrazovce, abyste udělali znatelný rozdíl, ale dá mi trochu více dýchací místnosti. V podstatě jsem jen rozšířit svůj "velikost mřížky" a stejný základní design pro mírně menší obrazovku stále funguje.
V posledních několika projektech však všichni moji klienti používali obrazovky s rozlišením 1080p (1920x1080) a chtěli řešení, která by využila co nejvíce této nemovitosti. 1920 pixelů napříč poskytuje téměř dvojnásobnou šířku, na kterou jsem zvyklý, a díky širokoúhlé obrazovce některé z mých starých přístupů k návrhům nefungují. Problém, na který narazím, je ten, že když mám tolik prostoru, jsem konfrontován s některými závažnými problémy.
- Kolik sloupců mám použít? Širokouhlý formát se hodí k rozdělení na 3 sloupce s rozdělením 2: 1: 1 (tj. Sloupec obsahu je větší než ostatní dva). Pokud však půjdu se třemi sloupci, co mám dělat s tímto sloupcem navíc?
- Jak mohu efektivní využívat obrazovku nemovitostí? Je zde pokušení dát vše na obrazovku najednou, ale příliš mnoho informací ve skutečnosti aplikaci ztěžuje. Prázdné místo je důležité, aby pomohlo pochopit složité informace, ale příliš mnoho způsobuje, že související pojmy vypadají příliš odděleně.
- Obvykle pracuji s webovými aplikacemi, které mají komplexní data, a vizualizace a prezentace je klíčem k pochopení prvotních dat. Když má váš uživatel také velkou obrazovku (nejméně 24 "), některé informace jsou mimo zrak a musíte přesunout ukazatel na velkou vzdálenost. Jak zajistíte, aby vše, co je potřeba, zůstalo ve vizuálních horkých bodech?
- Jednoduché weby, jako jsou blogy, se ve skutečnosti omezují, pokud je jejich šířka omezena, což vede k plýtvání nemovitostmi. Zajímalo by mě, jestli by textové pole a textový náhled vedle sebe byly velkou výhodou pro administrátorskou stránku tohoto typu obrazovky? (Rozdělení dvou sloupců 1: 1).
Pro vaše odpovědi vím, že téměř všechno v designu je "záleží". Hledám:
- Obecné zásady, které používáte
- Jak se změnil váš přístup k designu
Zjišťuji, že se musím rekvalifikovat, jak pracovat s tímto jiným formátem. Každá rána v usnesení, které jsem dosud zpracoval, byla asi 25%: 640 až 800 (zvýšení o 25%), 800 až 1024 (zvýšení o 28%) a 1024 až 1280 (zvýšení o 25%). Skok z 1280 na 1920 je však dobrým 50% nárůstem prostoru - ekvivalent od skoku z 640 přímo na 1024. Nebyla běžně používána střední velikost, která by pomohla učit se lekcím postupně.
Abych tuto otázku trochu soustředil, měl jsem projekt, který byl poněkud podobný Atlassian JIRA, systému správy problémů. Klient měl v úmyslu uchovávat asi šest různých typů záznamů, všechny by mohly být ve vzájemném vztahu. Shromažďování dat nebylo hlavním problémem, přestože sehrálo svou roli.
Důležitější stránkou problému bylo vytvoření systému, který by naznačoval možné vztahy mezi záznamy a pomohl analytikům rozeznat vzorce v hlášených incidentech.
Existovali různé typy analytiků, kteří se zaměřili na různé problémové oblasti, a vzhledem k povaze svého průzkumného typu práce nevěděli, co chtějí. Prostě věděli, že musí pochopit spoustu dat, nakreslit korelace a charakterizovat třídy problémů.
(Původně zde požádáno: https://softwareengineering.stackexchange.com/questions/45864/how-do-you-conquer-the-challenge-of-designing-for-large-screen-real-estate =, ale řekl, že by to mohlo být vhodnější)
Za odměnu : Natáhněte trochu mysl. Pat odpověď „Zvětšit vše“ má limit, jak užitečná je odpověď. Mluvíme o uživatelích, kteří musí mít smysl pro spoustu dat a najít vztahy mezi záznamy. Kdybych prostě narazil na velikost všeho, co bude velmi omezeno v tom, co mohou vidět na obrazovce - zejména proto, že vertikální je tak omezené.
Zdá se mi, že nejdůležitější je umožnit pohledy na více úrovní detailů najednou a ilustrovat vztahy mezi pohledy. Tam, kde se realita obrazovky opravdu začíná, je situace, kdy můžete přepnout z jedné úrovně na druhou pouhým pohledem na jinou část obrazovky, než na něco klepnout.
Takže nejdřív si myslím, že na jednu obrazovku dostávám několik úrovní, a také používám vlastnosti obrazovky v obou souvisejících částech a jejich rozdělování (a ne aby byly příliš přeplněné nebo ohromující). Vztahy lze zviditelnit zvýrazněním položek v seznamech a kreslících rámečcích na obrázcích, abyste věděli, na jaké podrobnosti se díváte.
Počet sloupců, to opravdu záleží na tom, jaké zobrazení v daném okamžiku přinášíte na obrazovku. Ve více vizuálních nastaveních (editace obrázků, zobrazení mapy) jsem si dokázal představit, že jde o jednu hlavní oblast, a učinit ostatní sloupce jen trochu širšími, než je obvyklé, aby se věci jako náhledy miniatur nebo podrobnosti o nástroji (myslím photoshop) stísnily. V systémech pro sledování problémů jsem si dokázal představit, že se sekce „podrobnosti“ třírozložení sloupců rozdělí ještě více (vertikálně nebo horizontálně) tak, aby zahrnovala věci, jako jsou podrobnosti o zákazníkovi, odpovědi nebo související problémy.
Také je třeba zvážit, že máte více místa. Jedná se o propagaci „zvětšete ji“, ale skutečně můžete využít ve svůj prospěch. U širších obrazovek můžete (například) zobrazovat rozpoznatelné miniatury, aniž byste museli vytlačovat další podrobnosti, nebo vkládat další informace vedle sebe. (Na menších obrazovkách jsem nikdy nemohl zapadnout, co jsem chtěl, do seznamu sloupců své poštovní aplikace, takže bych viděl jen polovinu řádku předmětu nebo pouze první část jména.)
Pokud máte více obrazovek, můžete použít více grafů a ilustrací. Jsou nepříjemné, když potřebujete kliknout, abyste se dostali k informacím, a pak lidé preferují data pouze před obrázky (je to moje zkušenost). Ale pokud můžete mít obojí ...
Dalším návrhem je prozkoumat témata týkající se vizualizace dat a návrhu dashboardu.
Hlavním problémem „jen rozšířit vše jsou bloky textu - skákání z konce řádku zcela vpravo na začátek dalšího řádku zcela vlevo je bolestivé, pokud není vizuálně podporováno.
Pro správu problémů se zobrazení ve třech sloupcích zdá být přirozené (omlouvám se, fogbugz):
Sloupec Navigace s uživatelsky konfigurovanými rychlými odkazy (např. Běžné filtry), sloupec pro seznam/strom/cokoli z problémů, který není přetížen sloupci, a podrobnosti o vybraném problému nebo vybraných problémech.
To by vyžadovalo rozvržení 1: 2: 2, pro které se 1920 zdá být stále trochu napjatá.
==> Rychlý přechod k redistribuci nemovitostí mezi seznamem emisí a podrobnostmi o vydání může být užitečný zde.
Obecně toto rozložení funguje pouze s širokou obrazovkou. Chcete-li podporovat další rozlišení, možná budete muset nabídnout několik možností rozvržení:
Doporučuji připravuje se na tuto možnost, i když vaši klienti řeknou „ne, všichni máme velké monitory“. Někdy musíte udělat jen malý notebook nebo poloviční obrazovku.
Design
Myslím, že musíte opustit myšlenku jedné dlouhé (vertikální) stránky . Místo toho si představte prohlížeč jako kontejner bloků nebo plátno. Na širokoúhlých obrazovkách se bloky zarovnávají většinou vodorovně, na méně velkých obrazovkách musíte posouvat více. Myslím, že je důležité nespadat do navrhování pouze pro velké obrazovky. Protože se stále více používají i malé obrazovky. Místo toho, aby to fungovalo na všech obrazovkách, a nechte informace proudit/najít svou vlastní cestu.
Líbí se mi, jak například TaskRabbit umísťuje vysvětlující video. Dali to nad záhyb. Zde vidím chápání prohlížeče jako plátna místo jako stránky.
Správa informací
Také se nechám inspirovat některými filmy, jako jsou rozhraní matice , zpráva o menšině a jiná vícedotyková . Například viz zpráva menšiny, že tato obrazovka je mnohem větší než 1920x1080 :-). To, co dělají, je použití přiblížení, nechat uživatele vyměnit položky a fyzickou vzdálenost. Ten je však těžší pro použití na počítači. Ale další dva jsou zajímavé. Zejména pokud navrhujete rozhraní, ve kterém lidé musí spravovat a analyzovat spoustu informací.
Když jim tedy, jak říkáte, počítačová moc moc nepomůže v jejich analýze, myslím, že nástroje, které uživatelům umožní spravovat sami, se stávají důležitějšími. A tyto nástroje, například přibližování a nahrazování, vyžadují hodně místa. (A nechte prázdné místo!)
Příklady
Některé hrubé náčrtky s těmito nápady. Jsem si jistý, že můžete myslet na více a více relevantní pro vaši aplikaci.
Prohlížeč jako kontejner s informacemi pro uživatele: 
Nebo seskupte typy informací společně: 
Velkoplošná nemovitost je dvousečný meč. Výhodou je, že máte více prostoru, abyste uživatelům mohli zobrazit více informací. Nevýhodou však je, že uživatelům dáváte více informací, což může uškodit efektivitě uživatelů, pokud informace, které uživatelům zobrazujete, nejsou pro jejich úkol relevantní a místo toho vyplňují místo.
Zásada 1: Zajistěte, aby informace ve všech třech sloupcích přímo souvisely. Jinými slovy, navigační cesta pro všechny tři sloupce by se měla navzájem spojit. Informace se zobrazují ve sloupci jako přímý výsledek akce v jiném sloupci.
Princip 2: Začátek navigační cesty by samozřejmě měl začínat v levém sloupci. To znamená, že váš levý sloupec by měl být hlavní nabídkou nebo domovskou obrazovkou, kam uživatelé jdou, aby zahájili svou úlohu a vybrali své hlavní položky. Jakmile k tomu dojde, měly by se otevřít střední a pravý sloupec. Střední sloupec by měl jít hlouběji a zobrazit další podrobnosti o položkách vybraných z levého sloupce. Poslední a pravý sloupec by měl zobrazovat nejvíce informací a je hlavní pracovní oblastí, ve které budou uživatelé vykonávat svůj úkol.
Princip 3: Pořadí a velikosti sloupce by měly být navrženy tak, aby odrážely tuto informační strukturu. Váš levý sloupec by proto měl být nejtenčí, střední by měl být trochu tlustší a třetí sloupec by měl být obézní.
Zásada 4: Pravý sloupec je sloupec, ve kterém mají uživatelé provádět většinu svých úkolů. Je to proto, že má nejvíce místa, obsahuje nejvíce informací a je posledním sloupcem jejich navigační cesty. Střední sloupec je místo, kde byste chtěli zobrazit náhled nebo stav úkolu, který uživatel provádí. Levý sloupec může také udávat stavové podněty, ale měly by být na nejširší úrovni.
Udělal jsem drátový model, který to lépe ilustroval (nemohl jsem zde obrázek zveřejnit, protože by mi to nedovolil): http://imgur.com/YbVbj?full
Podívejte se na SmugMug pro několik nápadů. Jejich stránky se skvěle přizpůsobí horizontálnímu a vertikálnímu rozlišení obrazovky. Upraví počet miniatur na stránku a velikost střední fotografie.
Také si všimnete, že při změně velikosti okna má tendenci udržovat něco podobného rozdělení 50/50 mezi miniaturami vlevo a fotografií střední velikosti vpravo. Je zřejmé, že nenavrhujete online fotogalerii, ale možná by se mohlo použít podobné rozvržení.
Možná byste se měli podívat na webovou stránku „Designing for (Google) TV“ - obecná sada pravidel pro webové stránky zaměřené na obrazovky 720p nebo 1080p.
Obsahuje všechny obecné gnaffy, jako například „ujistěte se, že pro navigaci můžete použít šipky“, ale relevantní body jsou věci jako „Nepoužívejte velikost písma menší než 18 pixelů pro obrazovky 1080p“.
Myslím, že se v podstatě snaží říci, že byste to měli navrhnout přesně stejným způsobem, ale použijte větší prvky a velikosti písma. Příliš mnoho informací na obrazovce vypadá svinsky a obrazovky HD/high res vždy vyžadují větší písma.
Dobře, tady je princip ze studie z roku 1996:
Když uživatel přepne z práce s 1 obrazovkou na 2 obrazovky, produktivita vyskočí o 40% (v kodérech). To je mocný argument pro více pixelů. Proč nyní produktivita skočí? protože ztrácí méně paměti a blikání času mezi kartami nebo aplikacemi (méně přepínání kontextu )). Kontextové přepínání drahé. Pokud tedy chcete využít vaší nové „země“, použijte nové oblasti pixelů, které vám byly dány, aby se snížila frekvence/riziko/pravděpodobnost „kontextu“ přepínání ". To by mohlo znamenat kontraintuitivní věci, jako například zmenšení okna aplikace tak, aby ostatní aplikace, které vaše aplikace obvykle spolupracuje, pohodlně společně společně na stejnou obrazovku. Příklad toho můžete vidět s GMAIL, před několika lety se editor e-mailových zpráv pro gmail stal nepatrnějším.
přizpůsobte svou aplikaci ostatním aplikacím (to je odvozeno od 1). Podívejte se, jak vaše aplikace může optimalizovat celek, nejen vaši aplikaci
doufám, že to pomůže.
PIC: Když velikost obrazovky explodovala, gmail composer okno se zmenšilo ... 
Jira (já to také používám) řeší tuto otázku jednoduše tím, že zvětšuje všechny prvky, takže pokud existují dva sloupce, prvky sloupců se jednoduše zvětší, v různých rozlišeních obrazovky. Myslím, že to není nejlepší řešení, protože na opravdu široké obrazovce by to bylo opravdu liché ...
Takže kdybych byl tebou, pokusil bych se vytvořit rozhraní, které je zarovnáno na střed a má nějaké prázdné místo také na levé a pravé straně:
Tímto způsobem si můžete hrát s mezerou:
- 1680: 75% (1260) obrazovky je obsah, 25% je prázdné místo na obou stranách
- 1920: lze použít stejnou stupnici (1440) - 75% až 25%
S tímto oduševněním by se váš obsah zvýšil pouze o 14% a na obou stranách byste mohli mít prázdné místo. Všechny prvky obsahu ve středu by se měly zvětšit (o 14%), aby splňovaly požadavky na viditelnost, ale zarovnání mezer a středů by výrazně zvýšilo ux!
- vaše uživatelské rozhraní by nebylo příliš přeplněné
- nemusíte navrhovat celé uživatelské rozhraní pro různá rozlišení obrazovky
- budete muset použít multiplikátor x1.14
Používám 1680 * 1050 - ale nevyplňuji všechny prohlížečové aplikace, které vyplňují celou obrazovku, protože nejsem na to zvyklý ... všechny webové stránky a téměř vše je optimalizováno pro nižší rozlišení. A opravdu potřebuji prázdné místo.
Jira nemá žádné skutečné bílé místo, v roce 1680 vypadají všechny prvky příliš velké, pouze s malým obsahem. Při použití prázdného prostoru by bylo jednodušší používat celé rozhraní!
Obecné zásady, které používáte
Chunking, seskupování informací, takže sekundární prvky jsou v designu méně nápadné, např .: řádek nabídky v horní části této stránky má tmavé pozadí. Dalším příkladem je tento web který používá celou obrazovku s panely na každé straně k ukládání sekundárních informací a navigace.
Hledejte způsoby, jak vyrovnat strukturu informací, aby se snížil počet kliknutí pro přístup k běžným úkolům
Jak mohu efektivně využít obrazovku nemovitostí?
Mohli byste použít ukotvitelný panel nástrojů s nástroji pro analýzu. Mohli byste mít ještě jednu rudu, která by mohla být vybrána během nastavování dat/analýzy, a pak skrytá.
Jak zajistíte, že vše, co je potřeba, zůstane ve vizuálních horkých bodech?
Mohli byste mít velmi velký displej a ukázat část portu zobrazení, kterou by uživatelé mohli navigovat, např .: google maps