PŘÍBĚH UŽIVATELSKÉHO ROZHRANÍ MICROSOFT WINDOWS:

PŘÍBĚH UŽIVATELSKÉHO ROZHRANÍ MICROSOFT WINDOWS: Od Windows 1.0, přes Ribbon, až k Windows 8

Martin Dostál Honeywell International - Aerospace Advanced Technology Europe Masarykova Univerzita v Brně, Fakulta informatiky Tuesday, March 11, 14

Představení •

Human Factors Scientist v Honeywell Aerospace – Advanced Technology Europe - Human Centered Systems

•

Externí lektor, Fakulta Informatiky Masarykova Univerzita v Brně

•

Odborné zájmy: Human-Computer Interaction, Human-Factors, User interface design, funkcionální programování, umělá inteligence, kreativní systémy

•

Co dělám: HMI/UI design&meta-design, inovativní interakční koncepty, hodnocení použitelnosti, evaluace a validace systémů (plánování, provádění, analýza dat a reporting), mentoring, inteligentní a adpativní systémy

cz.linkedin.com/pub/martin-dostál/31/11a/429/ 2 Tuesday, March 11, 14

http://dostal.wserver.cz

Osnova

•

kořeny grafických uživatelských rozhraní (prostředí) v moderném smyslu

• • •

Windows na desktopu Ribbon User Interface Windows 8

3 Tuesday, March 11, 14

Kořeny moderních grafických uživatelských prostředí

Tuesday, March 11, 14

Před osobními počítači

• • • •

přímé ovládání (řízení) metafory versus principy fungování absence interaktivity znakový vstup/výstup (terminály, děrné štítky ...)


Memex • • • • • •

Memex (Memory+Index)

•

hypertext, vyhledávání a asociace

•

práce s obrazem

Vannevar Bush „As We May Think”, 1945 „pouze” teoretický koncept pracovní stůl s periferiemi datově orientovaný, komunikace


Sketchpad

• •

1963, Ivan Sutherland

•

první graficky orientovaný systém

•

předchůde CAD (Computer Aided Design) systémů

první interaktivní systém namísto dávkového zpracování


Sketchpad •

pracovní plocha (metafora papíru)

•

ovládání pomocí:

• •

panelu tlačítek (akce) světelného pera (objekty)

•

inteligentní interpretace vstupu

• • •

vektorová reprezentace objekty jako prototypy manipulace s objekty 8


NLS

• • • • • • • •

Douglas Engelbart,1968 cíl: zlepšit práci člověka nikoliv jej nahradit aplikace: práce s textovými daty pracovní plocha jako okno v jednom okamžiku jedno okno primitivní vektorová grafika hypertext groupware


NLS

•

ovládání:

• • •

třítlačítková myš „chord keyboard”

výstup jako malá obrazovka snímaná filmovou kamerou


Od výzkumu k byznysu

•

Xerox Palo Alto Research Center

• •

Apple

•

směřování k osobním počítačům

od počítačů pro experty ke kancelářské práci


Xerox Alto • • • • • • • • •

počítač pro kancelářskou práci zaměření na úlohy grafické uživatelské rozhraní ne zcela jednotné rozhraní použití více oken najednou objektová orientace v aplikacích textové rozhraní mimo aplikace výstup WYSIWYG

u o k èč i l u k myš s

převážně modální ovládání 12


Xerox Alto - software


Xerox Star

• • • • • • • •

1981, 17.000 $, určený pro kancelářskou práci zásadní inovace v GUI dodnes velmi inspirativní dokumentově centrický systém metafora pracovní plochy objektová orientace jednotné rozhraní ovládání klávesnicí a myší (dvě tlačítka)


Aplikaèčnìě centrický vs. dokumentovìě centrický systém

Video: www.youtube.com


Video: www.youtube.com


Xerox Star

• • • • • • •

řešení klávesnice předobraz drag-and-drop minimalistické rozhraní nepřekrývající se okna princip postupného odhalování (progressive disclosure) modalita kurzoru objektová orientace, object-action paradigma


UCD a Xerox Star •

first application of user-centered design

• • • • • •

„design then code” prototyping task models and analysis iterative approach

user studies user interface design with strong visual considerations


Apple Lisa •

dokumentově orientovaný systém

•

pojem aplikace je upozaděný (mj. aplikace nemají „Quit”, ale “Set Aside”, nemají New – Stationery Pad)

• •

zpětná vazba

•

přímá manipulace a minimalizace modality, srovnejte s Xerox Star

také „nedokumentové” aplikace


Apple Lisa – inovace v GUI

• • • • • • •

menu položky v menu jako akce i volby zakazování položek v menu drag-and-drop koš jednotlačítková myš zavedení dvokliku


Apple Lisa jedním okem


GUI v moderním smyslu

• • • •

konzistence UCD budování rozhraní v pravém slova smyslu vědomá práce s

• • •

metaforami mentálními modely mapováním


GUI v moderním smyslu •

komponenty

• • • • • • •

okna plocha rozbalovací menu kontextové menu toolbar ovládací prvky

interakční techniky jako alternativy

• • •

klávesové zkratky ukazování (point-and-click) přímá manipulace 22


Osm zlatých pravidel 1. Usilujte o konzistenci. 2. Respektujte širokou skupinu uživatelů. 3. Poskytujte zpětnou vazbu.

• •

silná C. G. Jung: Není léku proti smrti, a proti chybám není ani žádných pravidel

slabá

4. Navigujte uživatele. 5. Předcházejte chybám.

6. Umožněte uživateli vrátit se a buďte tolerantní k jeho chybám. 7. Vytvářejte předvídatelné uživatelské rozhraní. 8. Nepřetěžujte krátkodobou paměť uživatele, nabízejte přehlednost. 23 Tuesday, March 11, 14

GUI na PC před Windows


IBM PC jako platforma

•

levná a otevřená platforma vs. uzavřené platformy Xerox a Apple

• •

opožděný nástup GUI dominující textová rozhraní a operační systém MS DOS


DOS a GUI: VisiOn

• • • • • • • •

VisiCorp, 1983 první GUI pro PC nadstavba nad MS DOS běh více aplikací současně hardwarová omezení platformy (640x200 CGA) extrémní nároky na hardware kancelářské aplikace (VisiCalc – první spreadsheet) vysoká cena


DOS a GUI: VisiOn • • •

jednotné GUI okna text na úkor grafiky


Další nadstavby

GEM

GeOS Tuesday, March 11, 14

DESQView

28

DeskMate

Windows


Microsoft Windows

• • • • • • • •

vyvíjeno on 1981 veřejně oznámeno 1983 uvedeno 1985, 99 $ jednotné GUI běh více aplikací současně souborová orientace aplikačně centrický systém první úspěšná verze: 3.1 v roce 1992


Prototyp Microsoft WIndows


Windows 1

• • • • • •

důraz na text nepřekrývající se okna (split windows) není plocha grafická minimalizace aplikací ryze souborová orientace obtížná programovatelnost


Windows 1


Windows 2.0 až 3.1

•

Windows 2.0

• •

překrývající se okna

Windows 3.0., 3.1. NT

• • • •

začátek práce s potenciálem GUI (grafika vs rozhraní) není plocha v metaforickém smyslu konečně systémové dialogy od verze 3.0 začíná unifikace GUI - ovládací prvky a ikony


Windows 2.0 a 3.1


Windows 3.0 - předchůdce plochy


Windows 95

•

soubory jako ikony (ale podstata souborová)

• • • • •

dlouhé názvy souborů konečně plocha koš TaskBar menu Start


Windows Vista - Toolbar Menu

k 83: Zálo'ková nabídka v aplikaci Windows Me • •

vhodné pro jednoduché aplikace obsahuje tlačítka

• •

Button Menu – zobrazí další nabídku Split Menu – aktivuje akci

84: Nabídka (v$#ez) v panelu nástroj& aplikace P (ne)lze kombinovat s běžným rozbalovacím menu •


. První varianta tla"ítka (tzv. Button Menu) zobrazuje ko Windows Vista Tab Menu ruhá varianta je ur"ena k p#ímému vyvolání akce. P#íkla 85, kde tla"ítka „Tisk“ a „Vypálit“ zobrazují kontextové na vyvolávají p#ímo akci. se záložkami • okna

Tab Menu • nabídka (Task Pane Menu) je rozbalovací nabídka, kter hodí se pro jednoúčelové aplikace – funkconalita by • ovládacího prvku, kter$ nabídku zobrazuje/skr$vá, viz p spadla do jedné kategorie menu

, kde je zobrazena kontextová nabídka pro úpravu barev o může eliminovat dialogy záložkami

•


Windows Vista - Task Pane Menu

• •

rozbalovací nabídka přímý dopad na objekt (přímá manipulace)

´zek 86: Úlohová nabídka v aplikaci Windows Fotogalerie Obra

S ohledem na rozsah problematiky se v následujícím textu budeme v!novat po ním dv!ma typ"m nabídek, které jsou nejpou#ívan!j$í. Dal$í podrobnosti k na lze nalézt v kapitole Menus Windows Vista User Experience Guide. 40


5.3.1.

Nabídkov! pruh (Menu Bar)

Ribbon User Interface


Microsoft Office • •

25 let vývoje

•

obrovský nárůst funkcionality a nároků na HW

•

první verze pro Windows v roce 1989

•

Office 2007 – nové uživatelské rozhraní

•

software bloat

cca 500.000.000 uživatelů


Word 2003


Růst složitosti GUI Word Položky v menu

300

225

150

75

0 Word 1.0

Word 2.0

Word 95 44


Word 2000

Word 2003

Růst složitosti GUI Word Panely nástrojů

40

30

20

10

0 Word 1.0

Word 2.0

Word 95 45


Word 2000

Word 2003

Podíl verzí na funkcionalitě

18%

0%

11% 5%

25%

Word 1.0 Word 95 Word 2003

7%4%

37%

50%

Word 1.1 Word 97

Word 2.0 Word 2000


75%

11% 5%4%

100%

Word 6.0 Word 2002

Ribbon

• • • • • • •

alternativa k menu a toolbarům (resp. WIMP) princip: „one click solution” plochá interakce - žádné dialogy (sic!) navigace orientace na úlohy a aplikace pro tvorbu obsahu vhodné pro středně složité aplikace záložky vs. hierarchie


Ribbon

• • •

praktické potřeby vs. principy minimum přizpůsobitelnosti zvážit, když zjistíme:

• • •

obtížnou orientaci uživatele v rozhraní - navigace frustrující/interakčně pracné/příliš hierarchické nebo sekvenční akce

pozor, když je aplikace rozsáhlá


Ribbon

Hlavní tlačítko Toolbar

Kontextová záložka

Záložka

Skupina


Ribbon – záložky

• • • •

záložky jsou organizované ve skupinách standardní modální kontextové


Rich Commands • • • • • • •

These unintelligible icons require labels for rich commands.

Rich commands: akce reprezentované v Ribbonu

Sizing. Instead of uniform sizing, commands are sized relative to their frequency of use and importance. In addition to making the most frequently used commands easier to find and click, it also makes them more touchable [ http://msdn.microsoft.com/en-us/library/cc872774.aspx ] .

ikony (často i text), návodnost

různá velikost i dynamická změna velikosti (?!) Split Button Rozbalovací menu (Rich drop-down menu) a galerie In this example, the most frequently used button is larger than the others. Náhledy (Live Preview)

Dynamic sizing. Rich command controls resize themselves to take full advantage of the available space, as opposed to using a fixed size and either truncating or using overflow when the size is to small.

komplexnější Tooltipy

In this example, the command buttons resize to work well in the available space.


51 Split buttons. Split buttons are a good way to consolidate a set of variations of a command when needed, while maintaining directness for the most frequently used command.

SplitButton

zdroj: Window Vista User Interface Guidelines


Rozbalovací menu a galerie



LivePreview



Enhanced Tooltip



Ribbon v Microsoft Office 2013


Windows 8


Windows 8 •

zacílení na dotykové ovládání (srovnejte s Windows 7) z pohledu interakce

•

dvě prostředí v jednom

• • •

Modern UI (Metro Design Language) Desktop srovn

limitace


opU t k s e d í ncepc o k s e e jm

Anatomy of a Win

Windows Store apps have a new struct Windows 8 - interakce

•

zpětná vazba, animace, responsivita

• •

flexibilita

Tiles

T a d a

od ikon k aktivnímu obsahu

• • •

always visible menu bar and modal dia surfaces you can use, like the app canv right surface at the right time can mea a burden.

Dlaždice (Tiles) vzpomeňme dokumentověcentrické systémy

plochá interakce

The app page, or canvas


The app page, sometimes called the ca zdroj: Window User Interface Guidelines content andVista controls. Whenever possib example, don’t use a pop-up to display the error message in the window with

Charms Windows 8 - interakce

The charms are a set of buttons available in every app: sea We believe these represent important actions that people they use.

• App Bars • Charms INTRODUCTION Kontextová menu • Anatomy of a Windows Store app

Charms



Search People can search for content located your search your app's content from another app.



Share People can share content from your app wit



Devices People can connect to devices and send c



Settings People can configure your app to their pr



Start People can go directly to the Start screen.


The charms are a set of buttons available in every app: 60 search, share, connect, settings, and start. We believe these represent important actions that people want to complete in almost every app Tuesday, March 11, 14 they use.

Windows 8 - interakce Message Dialogs • Don't use context menus as the primary command interface for an app. That's what the app bar is for. INTRODUCTION • Flyouts Anatomy of a Windows Store app Message dialogs Toasts • dialogs Message are dialogs that require explicit user interaction. They dim the app window and

from message dialogs. demand a response before continuing. Use message dialogs only when you intend Unlike to blocka dialog, you show a flyout on and you always dismiss the flyout when the user taps outsid people from using your app until they respond.

In the example above, the app window is dimmed, and the tap one of the two buttons Inuser the must example above, app stays active,Guidelines and the user can zdroj: the Window Vista User Interface to dismiss the dialog. That is, the message in the dialog cannot be ignored. flyout to dismiss it. That is, the message in the flyout can be

Flyouts Tuesday, March 11, 14

61

Toasts

Windows 8 - vizuální stránka

• • • • • • •

minimalismus více typografický než grafický (content before chrome) absence skeuomorfismu (ilustrace před grafikou) plochý design inspirace typografií v dopravních systémech tzv. švýcarský styl srovnejme s Apple - Braun - Bauhaus


Švýcarský styl

•

znám též jako internacionální typografický styl

•

zdůrazňuje

• • •

čitelnost objektivní estetiku

bezpatková písma SEGOE font


Skeuomorfismus: kalendář v iOS 6 vs 7


Apple - Braun - Bauhaus


Trendy a výzvy pro GUI • počítač jako • nástroj na výpočty, kancelářské zařízení, zábavní

elektronika, zařízení do kapsy, zařízení na tělo, ... • roustoucí role rozhraní • skloubení platforem pro jednoduché vs komplení aplikace • od příkazů k úlohám • od navigace k přímé manipulaci • diverzita zařízení a kontextu použití • nové modality, multimodální interakce 66 Tuesday, March 11, 14

PŘÍBĚH UŽIVATELSKÉHO ROZHRANÍ MICROSOFT WINDOWS:

Recommend Documents