My name is Jack Moffett
. I am an Interaction Designer with over ten years of experience. According to Herb Simon
, that makes me an expert, so I must have something worth sharing. I have started this venture as an exercise to spur critical thinking about my chosen profession. I hope that others may find it thought provoking as well.
DesignAday will present a brief thought about Design every weekday.
It’s no secret that I’m a big fan of Apple’s Magic Mouse. I also quite like the absence of scroll bars in the Mac OS while I’m using it. This is one inherited feature from iOS that really works, except for one thing.
The scroll bars appear while scrolling occurs and fade away about one second after scrolling stops. That is, unless you move your cursor over top of them, in which case they don’t fade away, but get larger, so you can click and drag them. This becomes an annoyance in the column view.
Notice how the horizontal scroll bar overlays the folder at the end of the list? If you are trying to select that folder, your cursor is there, and the scroll bar doesn’t go away. You have to move your cursor away, wait for the scroll bar to fade out, and then select the item. Apple should include a scroll bar’s height of empty space at the bottom of each column so that when you scroll to the bottom, the last item is above the scroll bar.
In Mobile Safari on iOS 7, Apple utilizes a very subtle microinteraction to reveal the search field. Usually, the search field on any given screen is revealed by swiping down to scroll past the top of the viewed content. The search field scrolls into view above the content. If you are viewing a web page, however, the top of the page could be a long scroll away. Apple detects your gesture. If you drag your finger slowly down, the page scrolls as normal. However, if you flick the page down, the page title bar enlarges to become the URL/search field. Scrolling the page up again shrinks it back down to show only the URL. The UI infers your intent in rapidly scrolling towards the top of the page, presenting the controls you would expect to find there.
I’m really digging the improvements in the latest incarnation of Safari’s Web Inspector. Here’s another supremely useful feature.
When you select an element, all of the browser dev tools list all of the rulesets that apply to that element. The list them in order of precedence, and they indicate which declarations are being overridden. So, whenever I’m trying to figure out why a style isn’t being applied, that’s the first thing I check. It’s easy enough to find the ruleset that is taking precedence. However, the ruleset may have multiple selectors, and they could be long, complicated ones. It can be a challenge to figure out which selector is the culprit. That’s no longer a problem in the Web Inspector.
As you can see in the screenshot, all of the selectors in that big block are gray except the one, little “p”. That’s the selector that is applying padding to the element that I have selected.
I owe somebody at Apple a beer.
Apple’s Keychain does serve a purpose, and perhaps is better than nothing. However, it is fundamentally flawed. When it comes to banks and credit cards, I want to use secure passwords, but I don’t want to have to type them in. Random sequences of letters, numbers, and symbols in mixed case are a pain to type. So, to be at all useful to me, a password aid must remember every password, synch them across all of my devices, and enter them for me.
I don’t care what Discover Card requested. I want strong security and ease of use. I can’t rely on keychain to provide that. 1Password has little to fear from Apple at this point.
Whether I’m troubleshooting a bug in Safari or testing cross-browser compatibility in Firefox, the developer tools like Firebug and Safari’s Web Inspector are invaluable. I’ll often work up an entire solution directly in the browser and then apply it to my source code. There is one absent function, however, that trips me up frequently.
I could add as many attributes to a selector as I liked, and I could add a class to an element, but I couldn’t add a new selector. I either had to write an inline style on the element, which is only going to affect that one element, or write a rule in my stylesheet and reload the page, losing whatever manipulation I’d done in the inspector. I’ve wasted a lot of time doing this.
The new version of Safari’s Web Inspector added a New Rule button in the Styles pane.
Select an element and press the button. If the element has a class on it, you’ll be given a new selector with that class. If it doesn’t have a class, you’ll get the element itself. But you aren’t stuck with that. You can edit it to be whatever you want. This provides an enormous amount of flexibility and makes the Web Inspector an indispensable tool (if you didn’t consider it to be so already).
Safari’s Web Inspector was updated in the new version that shipped with Mavericks. They corrected an oversight that has long existed in all of the browser developer tools, including Firebug. If a selector uses a pseudo-class, such as :hover, it will only apply when the element is in that state. This means that in the inspector, the style would only be listed as long as the cursor was hovering over the element in the page. There was no way to actually edit the style, because as soon as you moved your cursor down to click on something, the hover state was no longer in effect, and the style disappeared from the list.
Apple added check boxes at the top of the style list for Active, Focus, Hover, and Visited. Now you can select an element in the DOM, check the state that you wish to apply, and the browser will consider it to be in that state as long as you have it checked, regardless of where your cursor is.
My job just got a little bit easier. Thanks, Apple.
Following my 2-year contract cycle, I upgraded from an iPhone 4s to an iPhone 5s several days ago. I’ve always considered the iPhone to be the perfect size and have had no interest in the Android “phablets”. I want a phone that comfortably fits in the front pocket of my jeans. I was a little concerned that the extra length of the 5s would be a problem while sitting with it in my pocket, but I honestly haven’t really noticed a difference. There are two things, however, that I have noticed.
One is an inconvenience I was expecting. I have quite a collection of cables and peripherals with the old dock connector. The new phone, of course, only came with a single cable. I need to replace the speaker dock I use every morning to listen to podcasts while I’m shaving, showering, and so forth. I need a cable to carry with me in my bag so that I can leave one plugged into my iMac. I now run a cable from the phone’s headphone jack to my car’s Aux port, rather than plugging the phone into the port specifically for it. The dash controls no longer interface with it.
The other inconvenience I wasn’t expecting. All of the apps I have on my phone have to be signed into again. I tried to start playing Ender’s Game in my Audible app while I was driving home today, only to discover that the file wasn’t on my phone (apparently that wasn’t included in the backup from my old phone), and it wouldn’t let me download it until I signed in. I couldn’t do that while I was driving. Every time I launch one of my apps for the first time on the new phone, I have to go through the onerous sign-in process. Thank goodness for 1password! I wouldn’t be able to log into anything without it, but it’s still a tedious process.
- Switch out to the springboard.
- Launch 1password.
- Enter password.
- Search for login.
- Copy password and make mental note of user name.
- Switch back to app.
- Paste the password.
I know, they’re trivial, first-world problems. I love the the fingerprint scanner, but I’m impatient for it to work with everything.
For a long time, Safari had an “add” button attached to the left side of its address bar.
Pressing the button would add a bookmark, resulting in a sheet (Apple’s term for the dialog that slides down out of a window’s title bar) that would allow you to give the bookmark a title and pick a location for it. This button went away in Mountain Lion when they moved the bookmark feature into the “share” button just to the left.
I didn’t particularly like that change. It didn’t make sense to me, as the purpose of the bookmark wasn’t to share it, and I add bookmarks much more often than I shared URLs. However, it was more consistent with Mobile Safari. Now, as you can see in the screenshot above, Mavericks still has “Add Bookmark” in the “share” button menu, but the “add” button has also returned. I didn’t even notice this at first, and pressed it to add a bookmark without even thinking about it. That behavior was so habitual, I hadn’t yet replaced it by going to the “share” button. Having pressed it, I waited several seconds, expecting it to prompt me for a bookmark title and location. The sheet never showed. I investigated a little and discovered that the “add” button now adds the page to the Reading List. It adds a tool tip to that effect at the end of the URL.
I actually prefer this functionality assigned to the button, as I add things to my reading list much more often than I add a bookmark. However, the repurposing of the button happened so soon after it’s removal, it was confusing. I think using the Reading List icon (a pair of glasses) instead of a plus sign would have circumvented any confusion.
I was doing some writing in the new version of Pages, and I noticed that my word count wasn’t being displayed. So, I found it in the View menu and turned it on. As I got down to the bottom of the page, I noticed that it’s placement was in the way.
I scrolled the page up and kept going. After awhile, I was right back under it again. I thought to myself, “This is annoying. Surely, they will let me move it.” Sure enough, I was able to drag it, but only within the bounds of the page.
This is as far as I could drag it into the lower-right corner. The rectangle underneath of it is the footer. Even though I have three large displays with plenty of space, there is nowhere I can put the word count without it overlapping content.
Previously in Apple’s Mail application, to change the sort order of a mailbox, you would select “ascending” or “descending” from a menu. Of course, that comes with an expectation that users understand the meaning of those terms. I don’t believe average users do.
With Mavericks, Apple has improved the microcopy.
Now the options in the menu are as clear as they can be. It takes a few more words, but that doesn’t hurt anything here.