Rubrika: Uživatelské rozhraní

Disketa pro uložení, magnetický pásek pro voicemail a další příklady ikon, které se opíraly o každodennost věcí, které mezitím zmizely.
Když se nám materiálno digitalizuje, čím ho budeme ilustrovat? To byla otázka od prvních ikon.

Zdá se, že to funguje opravdu dobře. Otázka je, jak by to fungovalo na iPhonu, kde je plocha o poznání menší. Pokud by to tam fungovalo špatně a nedalo se to tam použít, musel by Apple zvážit, jestli se mu vyplatí rozbití jednotného přístupu v iOS.

Každopádně zajímavý prototyp.

Via @jasonfried

Simple HTML5 page edits. Storage.js uses the new HTML5 contenteditable attribute and localStorage to bring you HTML5 awesomeness.

Prezentační stránka není moc hezká, ale technologie vypadá dobře.

Device.js is a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing.

Dovolí vám měnit DOM, nejen načítat jiné CSS pro jiný rozměr displeje.

Pár dobrý tipů. Osobně nepoužívám a nemám rád zadávání hesla dvakrát. V registraci do Fakturoidu si může uživatel heslo nechat zobrazit.

Netvrdím, že by byly tyto CSS efekty nějak extra lepší — jakákoli odbočka od standardního chování je riskantní — ale dovedu si představit, že by se vám mohli hodit, pokud celá aplikace bude laděna, jak to říct, „hravě”?

Každopádně je to dobrá učebnice CSS, což je hlavní důvod, proč na ně linkuju.

Via @msgre

Chris Granger se nechal inspirovat úžasnou přednáškou Breta Victora a vytvořil tenhle koncept prostředí pro programování.

Via @rsj

Tech blog Dropboxu zveřejnil obsáhlý článek, ve kterém rozebírá sílu hesel a způsoby jejího měření (skvělý xkcd included). Ale nejen to! Navíc odkazuje na javascriptové udělátko, zvané poněkud nešťastně zxcvbn, které vám umožní rychle zobrazit sílu zadávaného hesla vašim uživatelům, případně je nutit do silnějších.

Když se mi nechce pracovat, učím se :-)
Zkoušel jsem vytvořit takové ty animované tečky symbolizující, že se něco nahrává.

Dan Saffer from Interaction Design Association

Via @ondrejvalka

Plugin pro „kinetic drag”, tj. čapnete objekt (myší nebou dotykem) a pokud s ním mrsknete bude se chovat přirozeně, tedy bude chvilku setrvačností pokračovat v daném směru. Pro desktop i mobilní zařízení s podporou HTML5.

An interaction model is a design model that binds an application together in a way that supports the conceptual models of its target users. It is the glue that holds an application together. It defines how all of the objects and actions that are part of an application interrelate, in ways that mirror and support real-life user interactions. It ensures that users always stay oriented and understand how to move from place to place to find information or perform tasks. It provides a common vision for an application. It enables designers, developers, and stakeholders to understand and explain how users move from objects to actions within a system. It is like a cypher or secret decoder ring: Once you understand the interaction model, once you see the pattern, everything makes sense. Defining the right interaction model is a foundational requirement for any digital system and contributes to a cohesive, overall UX architecture.
Defining an Interaction Model: The Cornerstone of Application Design, UXmatters

Dobré shrnutí teoretického přístupu a zajímavé nahlédnutí do procesu budování interakčního modelu pro rozsáhlou aplikaci ve velké firmě (HP).

Popisovaná aplikace — jakýsi cestovní portál, který má „transform the future of travel”, ehm — byla komplikovaná v tom, že potřebovali pokrýt více uživatelů s naprosto jinými cíli a tedy jinými interakčními modely. Vlastně je to jako navrhovat několik aplikací a ještě střechu nad nimi.

Pokud máte malý projekt, může vám dobře k zachycení interakcí posloužit třeba i jednoduchá technika, protože ten vysoko-úrovňový pohled se dá shrnout třeba do toho, že „zákazník potřebuje vystavit fakturu”. Každopádně i tak potřebujete tuhle oblast promyslet.

Autor je malinko jetej v „corporate speaku”, takže to si musíte přefiltrovat, ale za přečtení rozhodně stojí.

Za odkaz díky @janrezac

Beta test školení splnil svůj účel. Ověřil jsem si, že časově to vychází a našel jsem pár slabších míst, které budou chtít vylepšit.

Další termín školení bych viděl někdy na polovinu dubna, ale to ještě upřesním tady na blogu.


Patterns entrench themselves in our mental library through this process of encountering a situation, designing a solution, recognizing the same situation again, and recalling and applying the earlier solution.

The forces don’t have to be explicit. I never wrote them down before this post. But being aware of the forces makes it possible to critically analyze why you are making a specific design choice and how well that choice fits with the situation.

Understanding design patterns in your everyday work, Ryan Singer

Dobrý tutoriál, který může sloužit i jako inspirace pro to, co je důležité pro čistě Metro aplikaci.