Mac OSX UI toolkit and design guidelines

Slide 1

Slide 1 text

Mac OS X UI toolkit and design guidelines Fco. Javier Honduvilla Coto [email protected] Carlos III University

Slide 2

Slide 2 text

OS X 10.10 Yosemite

Slide 3

Slide 3 text

OS X 10.10 Windows UI and interaction framework for the apps’ content ● Types - document window - app window - panel - dialog - alert

Slide 4

Slide 4 text

OS X 10.10 Windows search dock toolbar menu bar actions more options

Slide 5

Slide 5 text

OS X 10.10 Windows

Slide 6

Slide 6 text

OS X 10.10 Windows

Slide 7

Slide 7 text

OS X 10.10 Windows - When a window is opened, it should preserve its previous state (Resume. UI Preservation) - If the selected element is a subset of all possible actions, show them all. - Automatic title on new documents

Slide 8

Slide 8 text

OS X 10.10 Windows titles

Slide 9

Slide 9 text

OS X 10.10 Windows scrollbar - Avoid old school scroll. Wastes valuable space - Don’t displace windows content on scrollbar appearance. It’s pretty annoying - Scrollbar color has to be coherent - Automatic scroll - Increases affordance

Slide 10

Slide 10 text

OS X 10.10 Windows scrollbar evol.

Slide 11

Slide 11 text

OS X 10.10 Windows search - Sometimes hidden/less bright and shown when clicked/ pointed on the menu. - Result - Contextual - Source list - Refine searches - Previous searches are saved

Slide 12

Slide 12 text

OS X 10.10 Windows search

Slide 13

Slide 13 text

OS X 10.10 Windows full screen - Not only to use space in a better way, but also to focus on user’s content. - Don’t take away from the user... - the freedom to interact with other elements. - the way they have of interacting with the system - the freedom of quitting the app or restore it to a smaller size

Slide 14

Slide 14 text

OS X 10.10 Windows toolbar - Most popular items - Use separators - Let the user hide it - Allow customization - ... - ∞

Slide 15

Slide 15 text

OS X 10.10 Windows toolbar

Slide 16

Slide 16 text

OS X 10.10 Icons - An icon should invite to use the app - Should show the app’s purpose - Can be like smaller versions, but more detailed - May use textures, but not too many - Should remind already known stuff - Different ones depending on the context

Slide 17

Slide 17 text

OS X 10.10 Icons

Slide 18

Slide 18 text

OS X 10.10 Menu Commands, attributes & states menu bar contextual menu dock menu

Slide 19

Slide 19 text

OS X 10.10 Menu Anatomy & behaviour click, alert, switch & kill, select moving mouse to another menu title

Slide 20

Slide 20 text

OS X 10.10 Pointer pointer, busy...

Slide 21

Slide 21 text

Credits and where to learn more Images, content, etc: © of Apple official design guidelines: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/

Slide 22

Slide 22 text

thanks!