http://edwardsanchez.me/
http://edwardsanchez.me/blog/14067294http://edwardsanchez.me/blog/14067294
Sat, 20 Sep 2014 11:09:40 PDTI don't intend to go in-depth about the funkiness of these new resolutions, so I recommend reading these 3 links to get the full picture.

In short, the iPhone 6 Plus is this kind of faux 3x. So your Photoshop canvas should be set to 1242✕2208 but the device will downsize it to 1080✕1920, which in a 2x world would look like the equivalent of 828✕1472.

The equivalent size helps me visualize the extra room that you get on the screen, because not only it's 3x pixel density but it's also higher resolution (more screen real estate) and that's too much for my wee brain to work out while designing. So, to help us understand, if you're used to designing for an iPhone 5s at 2x, your canvas would be the equivalent of 828 ✕ 1472 for the 6 Plus.

Design Strategy

Mostly what that means is that your mobile app designs now need to be responsive not only vertically but horizontally too.

I'm thinking I'll just design for the 4.5" screen and keep in mind what would rescale and realign when resizing up and then show in red-lines what flexes and what's fixed. And in certain circumstances I'll design specific screens for the 6 Plus to make use of the extra room. But, for the 6 Plus I'll design it in the 2x equivalency because I'm used to it, and then use PaintCode for glyphs and for images (like photos / avatars) they'll need to be generated in 1x, 2x and 3x.

Grid

The new resolutions are not all multiples of 8 (odd), but the grid can be an approximation of that. So here are some PSD templates with the grids.

If you want to sub-divide those into the largest possible squares you need to find the highest common divisor. On the iPhone 4 that is 32px, on the iPhone 5 it's 16px.

The iOS grid uses 16px divisions, sometimes subdivided into 2. Gutters don't apply to UI design as UI by nature is too dynamic to add such constraints. You'd find yourself having to break the grid all the time to properly lay your elements in a logical manner.

8, 16 or 32 pixels apart?

As a rule of thumb, based on the Principles of Grouping (law of proximity), elements that are related should be no more than 16px from each other and elements that are not related should be at least 32px from each other.

Apple sometimes uses an 8px grid with widgets that are divisible by 8px instead of 16px, and by having elements spaced out in 8px increments (8, 24, 40, 48, etc). I find this unnecessary for the most part and prefer to stick to multiples of 16.

If you must break the grid, or just want to be a rebel, do at least stick to spaces no smaller than 8px and to multiples of 8px. For the sake of this grid file I created a 16px grid as an 8px distance is the exception, not the norm.

Margins

There are 2 vertical margins on iOS, outer 16px (for title bar navigation such as back button, etc) and inner 32px (for content).

Horizontally the status bar is 32px and the margin follows 32px beyond that. At the bottom the nav bar icon labels are aligned 8px from the bottom, which is why I put a smaller margin.

How to use the file?

I recommend is that you place the PSD into your document as a Linked Smart Object (File > Place Linked). At have it as the top layer of your document. Set it to Locked, set blending mode to Multiply, and then toggle visibility on and off and change opacity as needed.

Another thing I recommend doing, which in a way makes this PSD kind of pointless, is to set your Photoshop grid to 32px with 2 subdivisions, this allows for easy snapping of objects to that grid.

Make sure you then set Grid visibility on by going to View > Show > Grid or pressing ⌘ ' to toggle (' is the key next to the return key on a US Mac keyboard).

Grid Toggles

I found it useful to toggle between 32px and 16 px grids as well as horizontal vs vertical grids. So when you place the file as a Linked Smart Object, in the Property Panel, with the grid layer selected, you will see these toggles:

]]>https://dl.dropboxusercontent.com/u/51334/Designing%20for%20Humans.pdfhttps://dl.dropboxusercontent.com/u/51334/Designing%20for%20Humans.pdf
Sun, 26 Jan 2014 04:01:59 PSTDesign ResourcesUser Experiencehttp://edwardsanchez.me/blog/13589712http://edwardsanchez.me/blog/13589712
Tue, 30 Oct 2012 08:10:46 PDTUser ExperienceThe debate of icon / text and icon + text label always fascinated me. Gmail started out with an all text interface and very few icons, recently it changed to the polar opposite and went on mostly icons with very few labels. But which is better? And why?

Novice users are not as familiar as we are with certain conventional icons, making an icon-only interface potentially harder for them to use. On the other hand, to the tech-savvy users, having text labels everywhere may be perceived as cluttered and unnecessary. So how do we make everyone happy?

After some googling on the subject I found a fascinatingly detailed study on the usability of icons only, text only and icons + text. You can read it here if you want to know every detail about it, but below are some of my highlights and what I learned from it.

QUICK INTRO ON ICONS

Icons have been used on a limited basis since the early days of computer graphics. The popularization of iconic representation in the interface dates to the work of David Canfy eld Smith and his colleagues who developed the interface of the Xerox Star workstation (Smith et al. 1982; Johnson et al. 1989). Icons are used in the interface because they are presumed to facilitate the human-computer interaction.

It is easy to find enumerations of the supposed advantages of icons in popular literature. Some claims that have been made are the following:

icons improve the productivity and reliability of work;

icons are better than words for representing subtle visual and spatial concepts;

icons save space;

icons speed search;

icons lead to immediate recognition;

icons lead to better recall;

icons reduce the necessity of reading;

All of these claims about icons implicitly compare icons to text in the interface. Many of the claims are psychological or perceptual in nature: that icons are easier to process than text.

NOT ALL ICONS ARE CREATED EQUAL

Icons differ in the degree of abstraction. Several icon classifications exist in the literature. Representational, abstract, and semi-abstract.

Representational (an eraser for "delete")Representational icons are simplified images of familiar objects or operations, for example, an image of an eraser to indicate a selective deletion operation. Their concreteness tend to be most effective since a small articulatory distance aids recognition. Eraser > Erase > Delete.

However, icons embodying an isolated analogy are often difficult for computer users to interpret, even concrete analogies, e.g. a wheelbarrow loaded with bricks to represent a move operation.

Semi-abstract (an arrow pointing to a folder for "move")Semi-abstract icons combine a representational pictorial element with an abstract symbol, for example, a folder with an arrow that indicates placing items in it.

IMPORTANT CONSIDERATIONS

Icon sets with more visual variety are easier to locate in a display

Visually simple icons work better than complex icons in icon search

Positional consistency in presentation of icons on the screen has a strong effect on usability and, once learned, helps compensate for initial differences in recognizability

Icons must be immediately recognizable to the targeted user population and use graphic conventions familiar to that group.

IMAGE SUPERIORITY EFFECT

When it comes to memory, researchers have known for more than 100 years that pictures and text follow very different rules. Put simply, the more visual the input becomes, the more likely it is to be recognized and recalled. The phenomenon is so pervasive, it has been given its own name: the pictorial superiority effect, or PSE.

All user interfaces make cognitive demands on users. Users must master special rules of system use, learn new concepts, and retain information in short-term memory. They must create and refine a mental model of how the system works and how they should use it. Successful user interface designs must respect the limitations of human cognitive processing.

Tests showed that visuals are processed 60,000 times faster than text, and people could remember more than 2,500 pictures with at least 90% accuracy several days post-exposure, even though subjects saw each picture for about 10 seconds.

The inefficiency of text has received particular attention. One of the reasons that text is less capable than pictures is that the brain sees words as lots of tiny pictures. And when we read, most of us try to visualize what the text is telling us. We essentially create icons inside our heads.

Using icons or symbols on a device serve as aids to memory, thereby reducing cognitive load since we can process icons and symbols much quicker than we can read text.

Graphics do what text alone cannot do. They quickly affect us both cognitively and emotionally:

Cognitively: Graphics expedite and increase our level of communication. They increase comprehension, recollection, and retention. Visual clues help us decode text and attract attention to information or direct attention increasing the likelihood that the audience will remember.

Emotionally: Graphics enhance or affect emotions and attitudes. They engage our imagination and heighten our creative thinking by stimulating other areas of our brain, which in turn leads to a more profound and accurate understanding of the presented material.

USEFULNESS OF ICONS

There are several reasons why the use of icons might have advantages over text in terms of human-computer interaction. It's been shown that recognition of visual images is superior to either recognition of words or sentences, and that humans have an almost unlimited ability to recognize images that they have seen before.

There are distinct resources available for different activities, such as perception and cognition. If the primary task is a problem solving task which requires cognitive resources, then the use of icons, which draw on a perceptual resource pool, may make more resources available for the primary task. A text-based interface, on the other hand, might compete with the primary task for cognitive resources.

Two kinds of perceptions are important in the acceptance of a system: perceived usefulness and perceived ease of use.

Perceived usefulness (PU)Perceived usefulness is the user’s subjective perception of the extent to which the system or software will aid in job performance. If you want to edit a movie and you open FinalCut Pro with all its movie editing related options you may perceive it as “useful”

Perceived ease of use (PEU)Perceived ease of use is the extent to which the user expects a system or software to require low effort to learn and use. When you open FinalCut Pro for the first time and you see all its movie editing related options, you may perceive it as “hard to use”.

The relationship of attitudes to the behavioral intention to use a system is that, all other things being equal, people will form an intention to use a system about which they have positive attitudes.

Icons give a positive early impression and thus support the formation of positive perceptions of ease of use and usefulness.

THE RESEARCH FINDINGS

Icons make systems appear more accessible to the new user may have the effect of increasing the perceived ease of use of a system and the user’s corresponding behavioral intention to learn and use it. With positive perceptions about a system, users are more willing to persevere in learning it in the face of any initial difficulties.

Icons with text labels were easier for participants to learn to recognize correctly but subsequently took more time for participants to choose from a display than unlabeled icons. However, it was also found that, once learned, there was little difference among icons in recognizability.

The combination of icons with text has the possibility of disambiguating the meaning of the menu choices available in the interface.

The results indicate a learning advantage for the label-only and icon + label interfaces compared to the icon-only interface for correctness, time and use of help.

On the other hand, the advantage in terms of correctness, although significant, was less exaggerated, suggesting that most participants could do most of the tasks regardless of the interface, simply by continuing to try different solutions until they were successful. The success of the label-only and icon + label groups suggests that in early learning text labels are more informative than icons.

The lack of difference between the label-only and icon + label groups in most comparisons suggests that the labels were the element that aided learning.

From these results, it appears that providing icons in combination with labels added little extra information of use in learning to manipulate the interface beyond what was conveyed by the labels.

A key question about these results is why the icon-only group performed so poorly. The point has been made in the past that icons, even representational icons, have to be learned. In early learning the meaning of the icons must be interpreted, and the meaning may not be obvious to the beginner from a pictorial representation alone.

Icon-only users have to first interpret the pictorial symbol then interpret its meaning in terms of system functionality. This dual burden is especially heavy in the case of learners who have low experience with both computers and the applications area. These learners have two disadvantages in interpreting icons. First, they do not known much about what the program they are learning is capable of doing. Without this knowledge, it is difficult for them to infer functionality from an icon alone. Second, they know little about the conventions of iconic representation. For example, more experienced learners know that a trash can-like object is often used to represent deletions, a file folder-like icon to represent a container for documents, a house icon to represent the home screen etc. Experienced learners can interpret these objects when they learn new interfaces, even though the objects are slightly different in form from those they have previously encountered. Thus, for learners more experienced with computers and the special c application, we would expect better performance with the icon-only interface than was seen in this experiment. While experienced learners will still have to learn unfamiliar icons, there will be fewer such icons and the learners will have a better basis for interpretation because of their past experience.

Although the icon-only group learned more slowly, made more errors, and used more help in early blocks of trials in session one, it should be noted that they closed the gap relatively quickly. So the difficulties of interpretation of unlabeled icons can be overcome fairly rapidly.

The icon + label interface was always considered easier to use than either of the other interfaces, including the label-only interface. This is a case in which perceptions do not match performance, since the label-only group inconsistently performed as well as the icon-label group. It appears that an interface designed with icons suggests ease of use to the learner and is rated easier to use partially independent of performance.

The icon+ label and the label-only groups had an easier time getting the interface to do what they wanted in session one and, as a result, probably gained a better understanding of system functionality initially than did the icon-only group. So their perceptions of usefulness were formed at that early point and remained fairly stable as they gained more incremental skill in session two.

CONCLUSION

The results of this study lead to the conclusion that learners of application programs are aided in initial learning by the use of either icons with text labels or text labels alone.

Icons lacking labels performed very poorly in the early stages of learning, although learners of the icon-only interface caught up with the performance of the other two groups by the end of the first session.

Learners have less favorable perceptions of the usability and usefulness of text-only interfaces.

On the basis of our results we recommend the provision of text labels in initial use of iconic interfaces.

When words and icons are closely entwined, we augment intelligence by increasing ‘human bandwidth'—the capacity to take in, comprehend, and more efficiently synthesize large amounts of new information.

Learners who have little knowledge of the functionality of the application program and who have little knowledge of representational conventions often used in iconic interfaces are most in need of aid. These users have little basis for making inferences about the meaning of icons in the lack of text labels.

This suggests that the text labels play an important role briefly in the early stage of learning, but after that they lose their value. From this, it appears that labels may be suppressed after the users have worked with the program for a relatively short time.

MY SUGGESTIONS

Use icons whenever possible

Initially show labels, with an easy to locate option to turn them off.

On desktop software/web apps, show labels smoothly animating on hover

On touch interfaces to show labels for a few seconds after launch and then fade them out. The labels could appear again on press and/or press+hold.

Show labels for the first few uses of the app, and once the user has tapped all or most icons in the app, hide the labels automatically and have it as an easy option to turn them back on.

What the hell is skeuomorphism? It's when an application tries to mimic its real-life counterpart. It's an object (or interface) that retains ornamental design cues to a structure that was necessary in the original but is no longer necessary. Kind of like adding a smokestack on an electric train.

The Calendar app on OS X is replete with leather, seams and a torn page. All ornamental and unnecessary beyond the familiarity factor.

One of the consequences of skeuomorphism is that when merging real life visuals with digital interactions the models start to break. You end up with leather buttons, serif type on a lined notepad, false affordances like pages that you can't really turn, and even a cookie crumb that you can't clean up. So as it tries to create familiarity to users it can also create confusion and awkwardness.

However, at its core, skeuomorphism is more than just the gratuitous mimicry of the look of a leather calendar. Buttons, shadows, ridges and toggles are skeuomorphic functionalities. Swiping, pushing and pulling are also real life interactions and could perhaps be called skeuomorphic, since they are not absolutely necessary to the functionality of the interface. But this is where the lines blur, and I would argue that although not necessary, they make it easier for our 3D brains to understand how to interact with a 2D interface and thus serve an important purpose.

There is validity to a skeuomorphic approach. To create any good interface, it is essential for the designer to understand the cognitive models that a user brings to any new product.

Since we have evolved interacting with 3D physics and not 2D screens to our brains buttons "ask" to be pressed, handles "ask" to be pulled, switches "ask" to be toggled. We instinctively know that smooth surfaces are harder to push than ridged surfaces. If an object casts a shadow our brains automatically perceive it with volume or on different plane. These are all affordances that as designers we should take advantage of and mimic on our interfaces.

Now let's look at the flip side of that coin. Minimalism.

Microsoft's new design language, Metro, is beautiful. Few disagree. It's minimalism turned all the way up, it's completely digital, so it looks nothing like real life counterparts. The unfortunate consequence is increased cognitive load and lack of affordances. In other words, the user needs to "think" before performing an action. Their brains struggle to figure out what can or cannot be tapped. They don't know what can be swiped, pushed or pulled because there are no real-world (skeuomorphic) hints for their brains to rely on (shadows, volume, texture, etc).

What Metro gains in visual beauty, it lacks in usability.

So what if we took the best of both worlds?

What if we added those visual affordances abundant in skeuomorphism to minimalistic UIs so they are easier for users to quickly grasp your application? I like to call it "skeuominimalism".

Skeuominimalistic design is simplified up to the point where simplification does not affect usability. And its skeuomorphic affordances are maximised up to the point where it does not affect the simple beauty of minimalism.

Make it minimal, but do not make away with shadows, lighting, volume, depth, focus and textures when they are necessary for affordances.

The new iTunes is a great example of skeuominimalism. By using physical familiarity of shadows, gradients and highlights the buttons afford to be pressed. The soft noise and gradients gives it a bit of mood lighting. It looks beautiful!

Jasmine, a YouTube client for iOS, perhaps goes a bit too far on the minimalistic side (by sometimes losing affordance in favor of simplicity) but it still uses shadows (for depth/hierarchy) and soft gradients for mood lighting.

In essence, skeuomorphism is not all bad - overusing its unnecessary ornamental visuals can at this point be considered cliché and a bad design choice in my opinion. But using physics and 3D affordances makes it easier for us humans to interact with apps and thus we as designers should take advantage of that!

I'm Edward Sanchez, User Experience and Visual Designer at Amazon for the Kindle.

In the folder called Presets, select all the files and drag them to the Photoshop icon in your dock. You'll notice that nothing happens but that's ok. If you do it again you'll get duplicates.

Workspace

With Photoshop Closed go on Finder and Navigate to /Users/(yourname)/Library/Preferences/Adobe Photoshop CS5 Settings/WorkSpaces/

Then drag the file called "UI Workspace" to that folder.

Open Photoshop and click on Window > Workspace > UI Workspace and you should notice the panels change around.

This workspace is designed to work with a large monitor + a laptop screen, so things may look out of place. It's ok for you to drag things around to make it work for you but all of these panels are important so don't completely dismiss any of them.

Settings

On the bundle I'm sending there's a folder called Settings with screenshots of my Photoshop settings.

Just make sure that your Preferences match each of those for better performance and improved tools.

Keyboard Maestro + Photoshop Shortcuts

Drag the Keyboard Maestro app into your application folder

Open it and exit out of the welcome screen

Click File > Import Macro Library

Select the file Keyboard Maestro Macros.kmlibrary from my folders

You'll see a screen with the button INSERT, click that and it'll import these macros

You then need to enable access to assistive devices by opening System Preferences > Universal Access > Tick Enable access for assistive devices at the bottom - close out.

Back in the Keyboard Maestro Groups you should now see a folder called Photoshop, and inside it you'll see several Macros and they keyboard shortcuts that trigger them. Open Photoshop and try them out.

Panel Options

Many panels in Photoshop need to be configured to show the best options. You can access these by clicking on the top right of each panel.

]]>http://edwardsanchez.me/blog/13443965http://edwardsanchez.me/blog/13443965
Thu, 08 Dec 2011 11:12:05 PSTDesign ResourcesMy friend Jonatan from midtonedesign.com created this super useful UI kit for Lion, so I carried on making some of the widgets and common UI elements he left off.