Touch Bar

Touch Bar

04 November 2016

I thought about the Touch Bar a lot in the last few days. There are three ways of looking at it.

  1. Don't believe Apple when they claim that function keys are silly because they are from the 1970s. This is just an excuse for why they choose to not make (or are not capable of making) the entire screen touchable similar to the Microsoft Surface Book or the Google Chromebook Pixel (failure).
  2. Assume that this is the next step in Apple's (and the entire industry's) goal of making everything touchable. It's too expensive and complicated to make the entire keyboard area touchable now, but on an infinite time scale everything will be a touchable screen. Remember cell phones before the iPhone? They had buttons everywhere. Steve Jobs on stage in January 2007 explained why this was bad (emphasis mine):
    And they all have these control buttons that are fixed in plastic and are the same for every application. Well, every application wants a slightly different user interface, a slightly optimized set of buttons, just for it. And what happens if you think of a great idea six months from now? You can’t run around and add a button to these things. They’re already shipped.
    This logic also applies to laptops, and the Touch Bar is just step one.
  3. Apple can no longer innovate. They couldn't leapfrog competitors on specs (in reality they did because of how thin and light the laptop is), so they added a gimmick that they can push with their massive marketing machine.

Personally, I believe #2 is accurate. My new MacBook Pro arrives later this month.

Permalink
*    *    *

Traffic Light

19 October 2016

I'm currently taking a JavaScript course at General Assembly. Here's a homework assignment where I had to build a traffic light. You can see it in action on Heroku.

JavaScript
// Setup
// ----------------------------------------------
var trafficLight = document.querySelector("#traffic-light");
var stopButton = document.querySelector(".stop-button");
var slowButton = document.querySelector(".slow-button");
var goButton = document.querySelector(".go-button");
var cautionButton = document.querySelector(".caution-button");
var runButton = document.createElement("button")
runButton.textContent = "Run";
var controls = document.querySelector(".controls");
controls.appendChild(runButton);
var cautionState, cautionLight, cycleState, greenlight, yellowLight, redLight;

// Events
// ----------------------------------------------
stopButton.addEventListener("click", changeLight);
slowButton.addEventListener("click", changeLight);
goButton.addEventListener("click", changeLight);
cautionButton.addEventListener("click", cautionLight);
runButton.addEventListener("click", cycleLights);

// Event handlers
// ----------------------------------------------
function changeLight(event) {
  turnOff();
  var state = event.target.classList[1].split('-')[0];
  trafficLight.classList.add(state);
}

function turnOff() {
  trafficLight.classList.remove("stop");
  trafficLight.classList.remove("slow");
  trafficLight.classList.remove("go");
  if(cautionState) {
     clearInterval(cautionState);
  }
  if(cycleState) {
     clearInterval(cycleState);
  }
}

function cautionLight() {
  turnOff();
  trafficLight.classList.add("slow");
  cautionLight = true;
  cautionState = setInterval(pulseYellow, 1000);
}

function pulseYellow() {
  if(cautionLight) {
     trafficLight.classList.remove("slow");
     cautionLight = false;
  }
  else {
     trafficLight.classList.add("slow");
     cautionLight = true;
  }
}

function cycleLights() {
  turnOff();
  yellowLight = redLight = false;
  trafficLight.classList.add("go");
  greenLight = true;
  cycleState = setInterval(cycle, 1000);
}

function cycle() {
  if(greenLight == true) {
     trafficLight.classList.remove("go");
     trafficLight.classList.add("slow");
     greenLight = redLight = false;
     yellowLight = true;
  } else if (yellowLight == true) {
     trafficLight.classList.remove("slow");
     trafficLight.classList.add("stop");
     greenLight = yellowLight = false;
     redLight = true;
  } else if (redLight == true) {
     trafficLight.classList.remove("stop");
     trafficLight.classList.add("go");
     yellowLight = redLight = false;
     greenLight = true;
  }
}
CSS
/* Layout */
/* -------------------------------- */
body {
	background: #6A9CDC;
	min-width: 320px;
	max-width: 375px;
}


/* Typography */
/* -------------------------------- */
body,
button {
	font-family: "AvenirNext-Regular", sans-serif;
}


/* Controls */
/* -------------------------------- */
.controls {
	display: flex;
	margin: 10px 20px 30px;
}
.controls button {
	flex: 1;
	margin: 5px;
	padding: 5px 10px;
	border: 2px solid #C0C0C0;
	border-radius: 5px;
	color: #FFFFFF;
	background: #A6A6A6;
	font-size: 14px;
	cursor: pointer;
}

/* Traffic light */
/* -------------------------------- */
#traffic-light {
	width: 180px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 20px;
	background-color: rgb(233, 196, 0);
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}


/* Lights */
/* -------------------------------- */
.light {
	width: 100px;
	height: 100px;
	margin: 20px auto;
	border-radius: 100%;
	border: 2px solid black;
	border-top-width: 6px;
	border-bottom-width: 1px;
	background-color: rgb(96, 80, 0);
	box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.2);
	transition: background-color 150ms;
}
.stop .stop-light {
	background-color: rgb(209, 43, 5);
	box-shadow: 0 10px 40px rgba(209, 43, 5, 0.4);
}
.slow .slow-light {
	background-color: rgb(255, 240, 47);
	box-shadow: 0 10px 40px rgba(255, 240, 47, 0.4);
}
.go .go-light {
	background-color: rgb(9, 204, 40);
	box-shadow: 0 10px 40px rgba(9, 204, 40, 0.4);
}


/* Pole */
/* -------------------------------- */
.pole {
	width: 30px;
	height: 300px;
	margin: 0 auto;
	border: 2px solid black;
	border-top-width: 0;
	background-color: rgb(91,70,2);
}
Permalink
*    *    *
iPAQ

Wherefore iPAQ

11 September 2016

Before the iPhone and before the iPad there was the PDA. I owned a variety of them including the Palm 3xe, the Palm V, and, a device I was truly connected to, the HP iPAQ 4155. (Sadly I never owned a Palm Tungsten.)

WiFi at Cornell quickly became ubiquitous when I arrived in August 2001. Classrooms, libraries, and cafeterias were covered. Taking out my laptop to see where my next meeting was (and still is) cumbersome. Using pencil and paper seemed (and still seems) silly. PDAs, unfortunately, were both expensive and slow to adopt WiFi. Lacking WiFi meant constantly synchronizing with a computer over a physical cable. Blasphemy! My goal was to find a product that could help manage my schedule, and stay up-to-date on email which clearly required WiFi. (Don’t even think about mobile data; it didn’t exist.)

The iPAQ was the perfect device. Yes, even with Microsoft Windows Mobile 2003. I purchased it in 2004 for $400 (expensive considering most of my money went to pizza and Saranac) along with software to allow it to synchronize with iCal over a USB to serial converter. Unfortunately, iSync didn't support Windows Mobile.

Let’s review why it was so amazing:

  1. It had a real email client (Outlook). This was significant because Mac users for a long time were forced to use Eudora. At the time Cornell also provided a horrendous webmail client named SquirrelMail. Side note: We also only had a few megabytes of storage. This forced me to delete the email conversation I had with a Winklevoss about features ConnectU was missing that thefacebook had. He said he was aware, and that Zuckerburg stole everything from them. 2004.
  2. It had a real web browser (Internet Explorer). With a little finagling it could also support Flash which was helpful in 2004.
  3. It had a summary screen that is still better than what iOS and Android offer (upcoming appointments, new emails, etc.). Fortunately I believe this will change in iOS 10 with widgets.
  4. It was small and light just like my Sony Ericsson T28, T68i, and T610.
  5. Its battery lasted all day even with WiFi turned on and borderline obsessive use.

One downside is it required a stylus, but it was a pre-touch world. I’ll forgive this because typing emails with a status is arguably better than fingertips. I don’t know why typing on a touch screen is so difficult for me. Am I too old (yes)?

I remember once Professor Jeff Hancock announced that the first person to email him would be allowed to attend some event. Guess who was first. Guess who proudly announced that he was first. Yes, me and me. Even Professor Hancock seemed surprised: “Oh you must have one of those mobile devices.” Thoroughly.

Interesting (in my opinion) side note: When I was an intern at Apple in 2002 (I’m so old), several executives (including Steve Jobs, Tony Fadell, Avie Tevanian, and Jon Rubinstein) gave lectures and Q&A sessions specifically for interns. One intern asked an executive when Apple was going to build a PDA. He casually removed his flip-phone from his pocket and said, “We believe this is the future of the PDA.” 2002.

The iPhone is great, but everyone has one. There was something exciting about being years ahead of the trend. Unfortunately, I think the only way to achieve this feeling again is to wear Google Glass and look like an idiot.

UPDATE: I now own Spectacles.

Permalink
*    *    *
Jelly icon

Jelly

12 May 2016
Background

I played with Jelly a few times in 2014 when it first launched because I was interested to see what one of Twitter’s co-founders, Biz Stone, would come up with next. Jack Dorsey famously co-founded Square after leaving Twitter, and Evan Williams founded Medium.

With Jelly 1.0 I remember asking a question with a photo, and receiving a few immature answers from people I didn’t know. I believe the goal was to connect your questions to friends’ friends on Twitter and Facebook.

The app faded away somewhat quickly. Now, it’s back. I’m going to write my thoughts about the iOS app as I play. Perhaps I’ll write about the web app another day. Let’s take a look.

App Store Description

“From Twitter cofounder Biz Stone comes an app that…” Right away this feels like the app can’t stand on its own, and it needs Biz’s help for promotion.

“Jelly uses your connections across social networks to supply quick replies to all your quandaries.” Quandaries. Great word. It also sounds like I’m going to post questions to people I know on Twitter and Facebook similar to the old Jelly. This is David 20 minutes in the future. Boy oh boy David from 20 minutes ago is incorrect.

Jelly app store screenshots
App Store Screenshots

“From Twitter cofounder Biz Stone comes an app that…” Right away this feels like the app can’t stand on its own, and it needs Biz’s help for promotion.

  1. “Jelly is a new kind of search engine.” New how?
  2. “Get concise, helpful answers from real people.” Real people instead of? I always get answers from real people. This isn’t new.
  3. “Help people out by sharing what you know.” Oh so there’s a place in the app to just share information? I thought this was all about questions and answers.
  4. “Ask (anonymously) and go back to your life.” Why anonymously? Does that mean I can ask… anything? Will this lead to lots of inappropriate content? Perhaps this is a rare situation where the goal is not to build a reputation. How noble! Also why do I need to go back to my life? I’m trying to get an answer to a question!
  5. “Jelly delivers answers and saves you time.” That’s a big promise. The first answer to my first question better be good.
Jelly home screen icon

Remember the old Instagram icon?

Home Screen Icon

The home screen icon feels a bit small compared to other apps’ icons. I’d like to see the Jelly logo a couple pixels larger. I also wonder what would happen if you inverted the colors: green background and white logo. Would that stand out more? Would that seem more fun?

Jelly home

Hey there's a larger logo. Looks great. :)

Home

"Ask Jelly anything–questions are always anonymous. And answer questions to help people out." This might be a bit picky, but why start the second sentence with a conjunction? I'm also still curious as to why Jelly continues to push anonymity. Is it for my comfort? The opposite occurs for me. I assume that I'm going to see an unregulated hodgepodge. Perhaps the Jelly team is betting that people will ask more honest questions if they are allowed to do so anonymously.

Jelly excessive drop shadoww button
Excessive Drop Shadow Button

Why use a white field with a giant drop shadow? I think a 1pt green border would accomplish the “hey tap on me” goal. It would also solidify that green means tap. Honestly, I’m not a huge fan of the excessive drop shadow trend we are currently seeing. It feels particularly odd on iOS.

The text in the excessive drop shadow button just says “Ask Jelly.” Ask Jelly what? There’s some explanatory text below that says to ask anything. Why not make that the default text in the excessive drop shadow button “Ask Jelly anything?” That would be much clearer. I’ll try asking a question in a minute. Also, from now on I’ll say EDS instead of Excessive Drop Shadow.

Jelly learn more
Learn more about Jelly

Tapping “Learn more about Jelly” takes me to a web browser with, what I like to call, Dropbox-style illustrations. They’re friendly and cute, but they don’t feel confident. They feel a bit too sketch-like (sketch with a pencil – not the application).

This screen is concise which I appreciate. If you want to learn even more there’s an FAQ.

Jelly scrolling
Scrolling

Oh look! Now I see why the button has an EDS. When you scroll, the button floats on top of the content. I think transitioning from a 1pt green border to no border with an EDS would accomplish the goal of indicating that I should tap on that button when I arrive on the screen, and I can continue to tap on it after scrolling. I believe in design context wins over consistency. Therefore, make the button’s design fit the context: green border when I arrive, and EDS when I scroll.

Jelly content
Content

The first question I see is “What’s your favorite national park in the US?” This is the moment I realized how the answer’s visual design is virtually identical to a comment on Medium. I know there are 4 answers, but I can only see 1 from “Katelyn.” The first answer Jelly shows me is from a user who has no avatar, and who has only contributed 2 “helpful answers.” This is a great opportunity to showcase the power of Jelly. Instead, I see a 1 word answer: “Yosemite.” That’s it? No reason? No story? This is pretty underwhelming. Also the first question is just a chance to share opinions instead of a situation where a user "delivers an answer and saves time."

Jelly answer question
Answer

I’ll try answering the question even though I’m not outdoorsy.

“Yosemite I guess.” The interesting part is the subtle “How do you know?” field. I suppose this means I can provide some proof that I know what I’m talking about. This is another missing piece of data from the first question Jelly showed me. How did Katelyn know that Yosemite is her favorite national park? But that doesn’t make sense either because one can’t know an opinion.

Jelly sign up

Please don't email me.

Sign Up

When I try to submit my answer, Jelly wants me to sign up. The first thing Jelly wants to know about me is my full name. After my name, the app asks me for my email address and a password. That’s 2 things right? The app says “One last thing” but then asks for 2 things. Hmm.

I’m in. I appreciate that the signup flow is not full-screen. That makes it feel quick and easy. I knew it was going to be over quickly because it wasn’t covering up the content. This is a great idea.

Jelly answers
Answers

I see other answers to this (silly) question: Glacier, Tetons, and Rocky Mountain. Okay. More opinions.

There’s a “Post” button that I assume allows me to post this answer outside of Jelly. Unfortunately, I’m mistaken. The “Post” button is my opportunity to comment on an answer. This doesn’t make any sense. There’s a reply icon next to “Post,” so I after pondering for a moment I realized [reply icon] + “Post” = comment. This is a big mental leap. Don’t be clever with copy. Just say “Comment.”

Feed

Now that I’ve signed up, I’m taking a look at the feed. At this point Jelly doesn’t know who my friends are, if I have friends on the app, or what my interests are. The feed is just a list of random questions. I can’t imagine a situation in which I’m bored and I would think, “Let me see what questions I can answer.” Back in the days of Aardvark, I would receive an email when someone asked a question about a topic that I claimed to know about. Here? Randomness.

Jelly topics list
Topics

The middle tab is topics, and it looks like I spoke (wrote?) too soon. This is where I can express interest in topics. I chose movies of course because I am the master of movie knowledge. Hopefully this will affect the content in my feed.

Jelly topics search results

I searched for a “design” topic, but only found deals, death, and death metal. This must be a bug because the second time I searched “design” worked as expected.

Jelly profile
Profile

Apparently this isn’t my profile! The tab bar icon is a person, and my name and avatar are at the top of the screen. However, there is a “Go to your profile” button. Very strange indeed. I suppose this is where I see a summary of my participation in Jelly.

Jelly actual profile

When I tap on “Go to your profile,” I see an avatar and my name again! What is happening?! The question I answered earlier is here as well. Why is this a different screen? Apparently this is where I can edit my profile by adding a real avatar and a tagline. If I had the opportunity to sign up with Twitter, the app would already know my name, avatar, and bio. This would have saved me time and effort.

I strongly believe these 2 profile screens should be combined into 1 screen with 4 tabs: Notifications, My questions, Saved, and My answers.

Jelly settings
Settings

This screen desperately needs whitespace to help differentiate sections. It feels like a sea of text. An additional 20 points above “Account,” “Notifications,” and “About” would make this screen much easier to read.

Jelly in-app notifications
In-app Notifications

Notifications are always more complicated than people expect. If you are actively using an app, push notifications from that app do not appear. As a result it’s beneficial to design and build custom in-app notifications. Jelly has them with a nice horizontal line that tells me I can grab the area and slide it up to dismiss it. Unfortunately, this doesn’t work. You can only tap on the bar to dismiss it. I waited several seconds for it to disappear automatically, but it didn’t. I think an in-app notification should animate off screen after a few seconds so it doesn't block content.

Jelly ask a question

I asked this because I clearly already know the answer. See www.whatup.coffee.

Ask

Finally! I’m going to ask a question: “What’s the best way to make a cup of drip coffee at home?” Obviously this is my first question, and I’m the best person to answer.

After entering the question some photos were suggested. I don’t know where they came from, and they’re pretty bad. I can use my own photo by tapping on a tiny, vague icon. There’s plenty of space for “My photos” and “Camera.” Again, don’t be clever. If there’s room for text, use text. You can also use 2 icons: the current icon, and a camera icon. This allows me to jump directly to the action I want.

I can hide and show the suggested photos. It’s just a way to show more whitespace. I don’t know why this functionality exists.

I added a few “details” to my question: grinder, machine, and beans. I’m interested to see how these appear in a question considering I didn’t notice any “details” in the questions on my feed.

Jelly turn on notifications

Ah-hah! Notifications. I was wondering why I hadn’t been asked yet, and the answer is context. If you wait to ask until a relevant moment the likelihood of turning on notifications increases. I’ve seen this again and again during user tests. “We’ll let you know when your question gets answered” is a great way to offer.

After asking a question I’m taken to the top of my feed where my question is posted. I see “+3 details,” and, again, I wonder why Jelly didn’t force the first question I saw in the beginning to have details. Show off the functionality! The Yosemite question was dull, and left me with a “meh” taste when I arrived.

When I try to share my question to Twitter, there is no text in the popup. I have to assume this is a bug.

Summary

I asked a decently complicated question about coffee, and I received some nice answers. However, I’m not sure how Jelly can be a better resource than searching for questions on Quora (which I hear some people still do), or just searching Google. What about looking up coffee kits on Kit? Or asking on Facebook? After designing and launching Trullo, I kept asking myself, "How can I get people to do x on my app instead of Facebook?" I believe Jelly needs to answer this question as well.

The overall design is pleasant. The designer(s) focused heavily on typography, and I appreciate the nod to Medium’s aesthetic.

The flows are simple. There’s really only a few screens in the entire app. Keeping it simple (stupid) is hard, and I respect when a team accomplishes this.

Permalink
*    *    *
Nextdoor iPhone Screenshot

Nextdoor

15 October 2015

Although Nextdoor has recently received some negative publicity, I'm hooked. Mounting my new E01 required a drill which, of course, I do not own. I posted on Nextdoor that I needed to borrow one, and within a few minutes I received a response. Amazing.

Warning: it's a pretty depressing app. Most of the posts are related to vandalism and theft.

Permalink
*    *    *
← Newer Posts Older Posts →