Samsung Notebook 9

[ The Verge ] The Samsung Notebook 9 laptops come in two sizes: 13.3 inches and 15 inches. The 13.3-inch version is light at just 1.85 lbs or 0.84 kg. As a comparison the 12-inch MacBook weighs 2.03 lbs or 0.92 kg. The bigger Notebook 9 is lighter. Now that’s something.

The 13.3-inch Notebook 9 is thin at just 13.4 mm, but the MacBook is a tiny bit thinner at 13.1 mm.  I’ll continue to compare these two laptops because they both push the limit of thinness and lightness. I don’t know what the Notebook 9 is made of, but it looks metallic from the photos on The Verge. Of course that can be deceiving: metallic paint over plastic can look a lot like aluminum or some sort of alloy.

Vlad Savov mentioned at 83% battery the Notebook 9 was reporting 3 hours and 33 minutes left. That must have been some wonky estimate by the operating system; according to Samsung battery life is rated at up to 10 hours, that compares well to the 12-inch MacBook, which is one hour less, wirelessly web surfing.

Unlike the Core M CPU in the MacBook, the Notebook 9 series can be equipped with a Skylake Core i7. But a fan comes along with that power. The MacBook is relatively weaker, but fanless. Power and noise or less power and silence. Would be nice if we didn’t have to choose.

The display is where the Notebook 9 series falls short. Both sizes are limited to 1920×1080. That is not bad, but it’s not great when compared to a smaller 12-inch MacBook that sports a pixel format of 2304×1440.

The Notebook 9 looks luxurious, but it’s the little things that count. In The Verge video you see Vlad Savov needing both hands to open the lid. And that bottom bezel is asymmetrically large.

Pricing and available dates have not been announced.

Lenovo ThinkPad X1 Yoga

[ AnandTech ] The Lenovo ThinkPad X1 Yoga is the first OLED laptop, a convertible one. The 14-inch OLED display is supplied by Samsung and sports a 2560×1440 pixel format. A 2560×1440 IPS LCD is an option. Samsung seems to be getting better at making OLED displays bigger: from 5.7-inch OLED displays used for the upcoming Galaxy S7 Edge and current Notes, and an 8-inch on the Galaxy Tab S2, to now 14 inches. I am concerned though.

Apps like Microsoft Word have a lot of white, so do many websites. OLED displays will consume way more energy than LCDs. On the other hand, if you’re watching video OLED has the upper hand because video is generally darker. My recommendation is to set a dark theme on Windows to extend battery life. I wonder how long the X1 Yoga will last if you’re working on it most of the time.

The keyboard is water resistant and both the keyboard and TrackPoint retracts when the display is rotated around, a nifty trick that makes using the Yoga as a tablet a bit more comfortable. The ThinkPad X1 Yoga ships this month, but you’ll have to wait until April for the OLED version. Price starts at US$1449.

Samsung Galaxy S7 and S7 Edge

[ VentureBeat ] Samsung will supposedly reintroduce microSD slots and add IP67 dust and water resistance on the Galaxy S7 and S7 Edge. I’m sure power users will be happy Samsung is bringing back the ability to expand storage. Water resistance should be a given considering we take our smartphones everywhere. The Galaxy S7 will sport a 5.1-inch 2560×1440 OLED display, while the Galaxy S7 Edge will be a larger 5.7-inch curved OLED with the same pixel format. The camera’s megapixel count will decrease from 16 to 12, while the lens will get faster from f/1.9 to f/1.7. The camera hump will be gone, if true an excellent design decision; I’m looking at you Apple.

iPad Pro Display Review by Raymond Soneira

Raymond Soneira:

The iPad Pro display performed very well in all of our tests and measurements, earning Very Good to Excellent in all test categories, performing not quite as well as the iPad mini 4, but it came in or tied for second place in every test except True Contrast Ratio in 0 lux, where it is the definitive winner and marked Best with a record 1,631.

But in two test categories the Pro display was not quite stellar: first, since 2012 all of the iPad and iPhone displays have had near perfect Log-Straight Intensity Scales (something that no other manufacturer has yet been able to match), but on the iPad Pro there is a significant Intensity Scale bump and irregularity at and below 45 percent signal as shown in this Figure, a surprising calibration issue for an Apple display (but still better than most competing Tablets).

Second, in Absolute Color Accuracy the iPad Pro just barely qualified for a Very Good Green rating, just 6 percent from the cutoff, where it has Average/Maximum Color Errors of 2.6 and 6.6 JNCD, much better than the iPad Air 2, but no where near as good as the iPad mini 4, as shown in this Figure. If better Absolute Color Accuracy is important, then for this screen size consider the Microsoft Surface Pro 4 with Average/Maximum Color Errors of 1.9 and 4.1 JNCD – tied with the iPad mini 4 for the most Color Accurate Tablet that we have ever tested.

Soneira’s test results show the display on the iPad Pro is one of the best there is, only the iPad mini 4 is better and Microsoft’s Surface Pro 4 when it comes to color accuracy. I’m somewhat surprised the iPad Pro’s display isn’t the best at everything. Isn’t one of Apple’s main target markets artists? With the big digital canvas and new Apple Pen? Artists need really accurate colors.

PayCrave

PayCrave was one of the projects I worked on during my Bloc.io apprenticeship. PayCrave is not an intuitive name so allow me to explain: It is is a mock mobile app that helps you find food trucks nearby, order the food you want, and pay for it. All you have to do then is to go there, pick it up, and eat!

I have never designed a mobile app from scratch so PayCrave was an eye opener. I didn’t know where to start so I took the suggestions on Bloc and started searching online. I found an abundance of tools such as iOS templates, vector graphics, color palette pickers, etc. all over the Internet. All user interface elements were designed in Adobe Illustrator.

I started putting ideas down on paper, well actually on pixels with a stylus on my Galaxy Note 4. The image above has been cropped by Pixelmater, a Photoshop-like Mac app that is just as functional but at a fraction of the price. I use Yelp almost all the time to find places to eat, so naturally I went to Yelp to find inspiration. The food trucks in PayCrave are actual food trucks in my area — San Jose, California. I wanted PayCrave to get you going — find your food truck, order the food you want, and start trekking over — as soon as possible. I wanted one of the first screens to be a map that automatically loads all nearby food trucks based on your current location. You can, of course, zoom in and out just like the Maps app on your smartphone. Looking back a Favorites of food trucks might have been a good option to add.

Click on a food truck and you get more details, such as exact location, contact information, how expensive the food is, photos, and reviews. Yes, much like you see on Yelp. (You see that ‘S’ watermark on the bottom right? That’s Samsung doing its not-so-great thing.)

Click on the menu button — yes, there is a menu button in the food truck details page; it was just invisible at the moment — you get to a list of foods available. You get to see beautiful photos, a description of what it is and how it was made, the price, and a button to add to your cart.

Only when you want to check out does PayCrave ask you to either make an account or login. I wanted a new users to experience first how easy it is to find a food truck and order the food you want to eat. The user then would be more willing to create an account with PayCrave.

The above map is the hand drawing rendered. The blue dot is where you are. Only two food trucks are showing, but you can flick up and the rest show up. The piggy icons show how customers have rated the food truck.

Above is what it would look like if you scrolled down the list of food trucks. Of course, there’s a filter: proximity, reviews, price, etc. It’s just invisible at the moment.

Like the hand drawing, the detailed food truck page shows additional information that helps the PayCrave user decide whether she wants to order from this food truck, or not. Of course, Moveable Feast wouldn’t be a good choice since it’s closed at the time I designed it.

This is making me hungry! The above page is the menu: enticing photos of food available, a description, the price, and a button to add to your cart (and a button that shows that you’ve already added). I wanted to keep the overall UI clean and simple, like you would want a restaurant to be.

The checkout page above allows you to change the quantity and shows you how much it’ll cost you. The + and – buttons were originally a little small and thanks to input from my Bloc mentor — Jason Early — I made the buttons a lot larger so it’s really easy to add or subtract from your cart.

This is when I wanted to ask our PayCrave user to create an account, after experiencing how easy it is to find a nearby food truck, find what you want to eat, and place an order. You can use Facebook or Twitter to sign up or use your email address and create a PayCrave account. You can also checkout without signing up, but take another look at all the benefits you’re forsaking. I took a page from Starbucks’ loyalty program, which I consider to be quite effective.

And a big welcome to Jony! I wanted to make sure Jony knew PayCrave is ecstatic to have him as a member.

The Place Order page shows a summary of what you’ve added to your cart, how much it will cost, and payment options.

Once your order is placed, your order is confirmed and you’re given the approximate time it will take for the food truck to get your order ready. And for your convenience a map of where you need to go is shown. Just tap the pin and let Siri help you get there.

You can write a review:

Well, there you have it. My first mobile app UI project. I’ve also created an InVision prototype to work on the user experience (UX). I’d love to get your feed back on it.

Note: I will be switching to Mac as my main design platform and the reason is Sketch. The full suite of Adobe designs tools were paid on a monthly basis during my Bloc apprenticeship, but going forward if I wanted both Photoshop and Illustrator it will cost me $50 every month. Illustrator alone would cost $20, per month, forever. I’d rather pay a one time fee of $99 for Sketch, which is a vector-graphics design tool like Illustrator but laser-focused on helping designers get going with designing.

Microsoft Lumia 950 XL Review by The Verge

[ The Verge ] Tom Warren:

The real star of Microsoft’s mobile show has always been its Lumia cameras. The Lumia 950 XL doesn’t disappoint here, but it’s not perfect. I’ve taken some great photos with it, but I’ve also taken some really bad ones. Microsoft still hasn’t perfected the software algorithms to comfortably take a photo with automatic processing to the point where I trust I can point and shoot.

Every smartphone camera sub-system is imperfect, including the iPhone 6S Plus, the Galaxy Note 5, and the Nexus 6P. This is a given. Based on this assumption, you now have to figure out to what level of imperfect you’re comfortable with.

But there’s also one more variable to consider: How good of a photographer are you? If you’re a decent photographer my guess is you can probably capture consistently great photographs with the Lumia 950 XL. Just keep in mind Warren thinks autofocus is a little slow. In a smartphone market filled with intense competition — some sporting laser-guided autofocus systems — Microsoft will need to up its game if the company wants to be taken seriously in the smartphone photography department.

Continuum is really the star of the show, however. It lets the phone transform into a low-powered PC, with a few catches. In addition to the phone, you’ll need Microsoft’s $99 Display Dock (or a Miracast adapter), a mouse and keyboard (Bluetooth or USB), and a monitor or TV. You plug the Lumia 950 XL into the dock or connect wirelessly, and the phone simply beams itself to the display. It looks very similar to a Windows 10 desktop PC, minus a few features like app snapping and full multitasking.

Microsoft designed this with universal apps in mind, but most of them don’t support Continuum yet. Microsoft’s own apps all work fine, but third-party ones need to be updated to support the feature, and the vast majority haven’t yet.

Continuum feels like a glimpse into the future, though. Every app developer is focusing their efforts on smartphones right now, not tablets or desktop PCs. If we arrive at a future where phones can be a single computing device, then Microsoft is well positioned to offer this. If Microsoft builds an Intel-powered phone with true desktop apps, Continuum could get very interesting. But that’s not where the 950 XL is at, and it’s little more than a parlor trick in its current state.

If I took the concept of responsive design — whether on the web or on device- and OS-dependent apps — and stretched it out to its theoretical limit, the beginnings would look something like Microsoft’s Continuum.

I don’t think Microsoft needs an Intel-powered smartphone to have “true desktop apps”. Mobile SoCs already have CPU and GPU power equal to desktop processors from only a couple of years ago. The bottleneck going forward will be less in hardware and more in software, especially in the area of user experience and user interface.

Do people need something like Continuum? Let’s think about this for a moment. I have a smartphone, a laptop, and a desktop. I work on all three. I carry my smartphone everywhere. The work I do on my smartphone is mostly communication, and mostly triaging communication: Is this important? Is this urgent? I don’t carry around my laptop as much as my smartphone, but when I do the type of work I do is more production-related work: responding to triaged emails — the important but not urgent ones (the important and urgent ones I’ve already dealt with on my smartphone), writing articles – because a physical keyboard that lets me use all ten fingers is much more comfortable to type on than on a screen that limits me to two fingers, and creating designs in Adobe Illustrator and Photoshop. My desktop stays put at home, and interestingly the work I do on my desktop is the same type of work I do on my laptop. Qualitatively though, it is different: everything is faster and I’m working on a much larger screen, which I believe helps me to be more productive.

I sometimes take my Apple Bluetooth Keyboard, which is inside my Incase Origami Workstation case, when I don’t want to lug my heavy but rugged Panasonic Toughbook. What I am doing is to do some of the work I do on my laptop on my smartphone: responding to emails and writing articles. But at the moment I don’t attempt to create designs on my smartphone. The apps — that make use of precise drawing tools like a mouse or digitizer — don’t exist. And even if the apps existed the small screen doesn’t make it easy. (An iPad Pro seems like an exciting potential solution.) For a smartphone to give me the experience I get on my desktop the hardware will need to catch up a bit, but software more so.

I think a lot of us want to simplify the tools we have. I’m pretty sure a lot of us want something like Continuum: a mobile experience on your smartphone, a desktop experience on your desktop. I’d love to see a laptop-sized screen, keyboard, battery combo that lets me wirelessly dock a smartphone. Imagine having to buy, update, carry just one computer, your smartphone. I’d like that. Though we’re not there yet, I like where Microsoft is going with Continuum.

Oh yes, the display. The Lumia 950 XL sports a 5.7-inch OLED display with a 16:9 2560×1440 pixel format. Gorilla Glass 4 is on protection duty. Just looking at the specs the display seems to be on par with the best Apple and Samsung has to offer. But if we want to know how good the display really is, we’ll have to wait until Raymond Soneira gets his hands on one and tests it.

Apple Products Are Made In China Because…

[ MarketWatch ] The Chinese have more skilled workers, more than in the U.S., more than in Germany, according to Tim Cook, in an interview with Charlie Rose on 60 Minutes. Here’s Cook:

The U.S., over time, began to stop having as many vocational kind of skills. I mean, you can take every tool and die maker in the United States and probably put them in a room that we’re currently sitting in. In China, you would have to have multiple football fields.

China has more than 1.3 billion people. The U.S. has a bit less than 320 million. China has more than quadruple the number of people than the United States. Like Cook explained, China has been building up its manufacturing infrastructure while the U.S. has been doing the opposite for quite some time. So I can understand there are more skilled laborers — as in quantity, as in the number of skilled laborers — in China than in the U.S. But what about the quality of those skilled laborers? Are Chinese laborers more skilled than those in the U.S.? Germany? Japan? South Korea? I don’t think Cook answered Rose’s question; Rose’s question was of quality and Cook answered as if the question was of quantity.

Let’s consider a hypothetical: China has the infrastructure to manufacture iPhones, iPads, and MacBooks at the quantity and quality levels Apple wants. But not price. Do you think Apple would be building their stuff in China?

This is what I think: The U.S., Germany, Japan, and South Korea have highly stilled laborers, but Apple builds in China because China has the infrastructure to build the products at the quality, quantity, and price Apple wants.

A Better iPad Pro and Apple Pencil User Experience

[ YouTube ] Steve Jobs, back in 2007 during the introduction of the iPhone:

Who wants a stylus? […] Nobody wants a stylus.

Steve Jobs again, in 2010 while introducing the iPad:

If you see a stylus, they blew it.

At first glance, it seems Steve Jobs doesn’t like the stylus. For good reason: remember Microsoft Windows XP Tablet Edition? I do. Windows XP, as well as all of the previous versions of Windows, was designed from the ground up with the assumption that you would be using a keyboard and mouse (or some derivative) to interact with its graphical user interface (GUI). With the Tablet Edition, Microsoft added the ability to use a stylus, while keeping almost all of the GUI the same. Yes, you could write and draw on the screen with a stylus, but the way you click, or tap, menu items, dialog boxes, etc. were identical. The stylus was thought of as just another input device, in addition to the keyboard and mouse.

In the mobile space, Palm did a similar thing with its Treo: add a stylus as an additional input device to the keyboard and d-pad. The main modus operandi for interfacing with the Palm operating system was the keyboard and d-pad. The stylus was a third option. UI elements remained the same and so did the user experience.

I remember using a Motorola Q running Windows Mobile 6.5, with nested menus and all; it was terrible, because I needed a mouse to more effectively maneuver around a desktop UI that was shrunk down to smartphone size.

Steve Jobs didn’t like the experience either. His thoughts on using the stylus this way on a desktop UI was spot on: nobody wanted it because nobody liked it. What he had in mind — a mobile UI designed around the use of our fingers — saved us from a lot of frustration.

Continuing with this logic, if Steve Jobs was alive today, he would not be against the idea of a stylus for writing and drawing, and not as an additional input device for maneuvering around the UI. I think he would be enthusiastically for it.

The Smartphone, Tablet & Stylus

In 2011 Samsung introduced the Galaxy Note, a 5.3-inch smartphone with a stylus. The stylus wasn’t like anything else on the smartphone market. The Palm Treo used resistive touch technology; you pressed down on the screen with the stylus (finger too) to depress the top level of wires and touch the bottom layer of wires. Resistive touch isn’t very accurate and wears out after a while.

The original iPhone as well as almost all subsequent smartphones and tablets to date use capacitive touch technology, a solid-state technology that technically does not wear out. A stylus used with a capacitive touch screen works just like a finger does; there are many cheap styli you can get for your iPhone and iPad. Dirt cheap, yes, but there are some significant limitations: no pressure sensitivity, no hardware-based palm rejection, no hardware-based eraser, etc. Smarter software can offset some of these limitations, and a Bluetooth stylus helps to alleviate a bit more, but you’re reminded from time to time that these limitations still exist. Palm rejection not always working being the most frustrating.

I wanted to write and draw on my iPad 3 so when the Pencil by 53 was introduced I got it. I liked it, when it worked. Palm rejection worked most of the time, but when it didn’t it was frustrating especially when I was in the middle of drawing something elaborate. I had to put the Pencil down, put two of my fingers and rotate them counter-clockwise to undo. That didn’t work all the time either! Despite the excellent feel of real wood, a soft but not too soft rubber tip, and an eraser, the times when it didn’t work frustrated me enough not to want to use it much.

iPad Pro and Apple Pencil

The new iPad Pro and Apple Pencil takes this technology — capacitive touch screen and Bluetooth stylus — up a notch. Apple:

A new Multi‑Touch subsystem in iPad Pro enables the striking capabilities and pixel‑perfect precision of Apple Pencil. Using incredibly fine‑tuned pressure and tilt sensors, Apple Pencil instantly recognizes when you are pressing harder or shifting its angle. So you can vary line weight, create subtle shading, and produce a wide range of artistic effects — just like with a conventional pencil. But Apple Pencil does far more. It can be a fountain pen, a watercolor brush, and even a calligrapher’s nib.

One more from Apple:

The lightning-fast responsiveness of Apple Pencil separates it from other creative tools. That’s because its latency — the tiny delay between when you begin drawing and the time it appears on the screen — has been reduced to an almost imperceptible level.

iPad Pro knows whether you’re using your finger or Apple Pencil. When iPad Pro senses Apple Pencil, the subsystem scans its signal at an astounding 240 times per second, giving it twice the data points it normally collects with your finger. This data, combined with Apple‑designed software, means that there’s only milliseconds between the image you have in your mind and the one you see on the display.

Within its slender case are intricate and accurate pressure sensors, capable of measuring a range of forces. The carefully positioned sensor determines precisely how hard the tip of Apple Pencil is being pressed down. Press harder to draw thicker lines. Or use a gentle touch for wispy hairlines. The variety of creative effects is virtually limitless. Which means you are as well.

Two tilt sensors built within the tip of Apple Pencil calculate the exact orientation and angle of your hand. As you naturally write or draw, the relative positions of each of these sensors can be detected by the Multi-Touch display. So you can create shading effects simply by tilting Apple Pencil the way you would a charcoal or conventional pencil.

I took the iPad Pro and Apple Pencil for a spin at a local Apple Store and the two felt good together. A took a couple of photos of what I was able to do with the two: one and the other one. A friend asked me what my experience was like and I responded that Apple seems to have designed the iPad Pro and Apple Pencil for artists. For comparison I went across to the Microsoft store and played with the Surface Book and I felt as though Microsoft built the Surface Book for business people. The iPad Pro and Apple Pencil combo is not laggy at all, but there was still a very slight lag. I don’t know exactly how many milliseconds, but the lag was there. Was it a bad experience? No, it was significantly better than any pre-iPad Pro and Bluetooth stylus combination.

The Best Stylus Experience, So Far

But what’s better is Samsung’s solution used in its Note series of smartphones and tablets. When I use the stylus with my Galaxy Note 4 there is no perceptible lag. Sure the stylus stinks, the apps are mediocre, and the overall UX isn’t all that great, but in terms of lag it’s the best there is. And there’s good reason for it: Samsung went to the best digitizer maker in the world and made a deal. And that brings me to Wacom.

Samsung uses Wacom’s digitizer technology. When it comes to the professional stylus market Japan-based Wacom is the de facto standard; Wacom owns about 85% of the world’s digitizer market.

[ Know Your Mobile ] Paul Briden:

“We had a similar mindset, a similar vision,” added Masahiko. He said that both Samsung and Wacom viewed the use of styluses in mobile devices as focusing on creativity and content production as opposed to the content consumption typical of touch-based devices without styluses.

That’s Masahiko Yamada, president of Wacom.

“You cannot write with a finger,” said Masahiko, “Touch does great things for control such as zoom and navigation, but when you try to write something, touch doesn’t work.”

Masahiko also considers Samsung to have been uniquely positioned to develop the Note concept: “Samsung’s the only one with enough clout to commit to the product,” he said.

Both Samsung and Wacom saw the opportunity for an active digitizer on smartphones and tablets. They saw correctly. Writing and drawing with a finger — unless you’re finger-painting — doesn’t work very well. What works best is an active digitizer. EMR or Electro-Magnetic Resonance technology was originally developed by Wacom. What’s so special about EMR? The stylus doesn’t need to be powered: batteries are not required. This little feature impacts the experience in many ways. Because batteries are not required, a complicated printed circuit board is not necessary. You don’t need to worry about the stylus not working because it is running out of power. The stylus can be simple, light, and inexpensive. Because of simplicity there is less to break and can last a long time. The stylus can be light. And if you lose your stylus it won’t cost $99 to replace it.

Samsung’s Galaxy Note incorporates a Wacom-technology sensor board in the screen to detect the movement of your stylus. This particular screen generates a magnetic field, which then induces a small amount of energy from the resonant circuit in the stylus. That small amount of energy generated in the stylus returns a magnetic signal to the screen. And that’s how movement of the stylus — including angle, speed, and pressure — is detected. Design professionals have been using Wacom for a long time, and for good reason: there is no perceptible lag between the screen and the stylus. And the system never — and I mean 100% never — confuses your palm for your stylus. There’s one more thing that’s really cool: you can hover over hyperlinks with your stylus and enjoy all the hover animations that a lot of designers incorporate into websites. If you’d like to read more about EMR, hop on over to Wacom’s EMR page. Oh, and Samsung owns 5% of Wacom. I don’t know if Apple can license Wacom technology, but I would be surprised.

A Better iPad Pro & Apple Pencil Experience

If Apple were to incorporate a Wacom-like EMR-based active digitizer in a later version of the iPad Pro and Apple Pencil, the experience would be a huge upgrade. Apple could remove a lot of circuitry, including the accelerometer and gyroscope, to make a much simpler Pencil. The much improved and simpler Apple Pencil would:

  • be considerably less expensive,
  • let you hover over hyperlinks,
  • never run out of battery (and you’ll never have to recharge it),
  • be a lot more rugged (less things to break),
  • let you flip the Pencil over and erase like you would a regular pencil with an eraser.

This future is not likely though, because Wacom owns EMR, and Samsung owns 5% of Wacom. I guess Apple could outright buy Wacom. That’s certainly possible with all the money Apple has in the bank. But I’d like to introduce you to a different possible future for Apple: TRAIS, and its Wacom-like digitizer technology that does not infringe on Wacom patents.

South Korea-based TRAIS was founded in 2000 and is headquartered in Ansan. TRAIS developed what the company calls T-Digitizer, which sports all the benefits of Wacom’s EMR technology: hardware-based complete palm rejection, imperceptible lag, simple circuitry (relative to a capacitive touch plus Bluetooth stylus like the Apple Pencil), tilt and pressure detection. Another benefit over Wacom for LCD manufacturers is the ability to completely integrate the T-Digitizer into the touchscreen. It’s also lighter than Wacom’s solution and consumes a whole lot less power. I think Apple might like that.

Full disclosure: I have been contracted by a friend to help folks get to know about TRAIS technologies, especial folks at Apple and other companies that want to incorporate a better stylus experience on smartphones and tablets. If you’re interested, contact me:

Jottly

Jottly, a Bloc.io UX Design project, is an online collaborative text editor. The live version of Jottly is at DISPLAYBLOG.com/jottly. Jottly was the first web page I created from scratch using HTML, CSS, and a tiny bit of JavaScript. The goal of the Jottly landing page was to convince you to try it out by clicking on the I’m In! button at the end.

There are text editors, on-line text editors, and collaborative text-editors. But on-line collaborative text-editors are not common. And the ones that are available are either simple but not powerful enough, or too powerful and complex. I didn’t have a lot of good examples that inspired me, so I started out with Sublime Text, a popular desktop text editor that was introduced to me when I was in the Full Stack apprenticeship at Bloc for three months, before I shifted to UX Design. Another text editor gaining popularity is Atom.

Personas

Before I get into the nitty-gritty of how the UI and UX were designed, I’d like to start from the very beginning. Thinking back — it was about 8 months ago and my long term memory can definitely use an upgrade — I believe the first thing I was asked to do was to create personas of those who would be using Jottly, and what for.

First was April Kim; here’s her persona profile, created using InDesign:

The purpose of this exercise was to get a good idea of what her needs and goals were and how Jottly can help meet and achieve them, respectively. By the way, in my imaginary Jottly world April Kim is a Senior Editor at Facebook. She leads a team of seven — located all over the globe — who update Facebook’s Newsroom page. I created two more personas and their profiles: Jack Sato, an Aikido Instructure, and Terry Park, a Developer at IDEO. Jack is not terribly computer savvy but uses Jottly to keep track of his students and how they are doing; he uses Jottly as a journal. Terry is a hard core programmer and needs Jottly to be powerful, just as powerful if not more than Sublime Text or Atom, but also similar so as to not require a steep learning curve. At this point I was thinking Jottly will need to be both simple and powerful. The persona idea is a powerful one and helps put myself in the shoes of those who will be using the websites and mobile apps that I design.

Icon Design

Next I’d like to share how the Jottly icon was designed.

Jason, my mentor, encouraged me to come up with as many logo designs as possible. So I did just that. I took great liberty to copy many existing logo designs for word processors, text editors, and the like. Take a closer look at the one on the bottom right: that should remind you of Sublime Text’s icon.

This page is filled with icon designs centered around the idea of incorporating writing tools (pencils, pens, fountain pens) and using the first letter of Jottly.

I took the letter ‘J’ and played around with it some more.

Here’s some more designs incorporating the shape of writing tools. The one in the middle is a stylized ‘J’.

I wanted to see how things would look like with a 3D perspective, compartmentalizing a circle, and making the letter ‘J’ blocky simple.

This, created using Illustrator, ended up being the final design. Similar to what I wanted the web application itself to be the icon here is simple. The letter ‘J’ — for Jottly, or a writing tool if using copious amounts of imagination — leads a line, which can be thought of as a line of text. To soften the sharp edges of the letter ‘J’ and the following line, tight radius corners were used.

User Interface Design

What better way to convince the web app is worth your time to try out than to show the web app itself? That’s what Sublime Text and Atom do: the UI is right there front and center. Sublime Text nicely animates the UI. I wanted to do that too. I did, but the challenge was that it was not responsive to different page widths, and neither is the animation on Sublime Text. I decided responsiveness was more important. So instead of animations I chose a few choice images. These images are in SVG (Scalable Vector Graphics) format. Resize the browser window and the UI images — along with all other elements including the icon and text — should respond accordingly. A quick geeky note: viewports (vw, vh) were used instead of px or em to maximize text size responsiveness. Check it out at DISPLAYBLOG.com/jottly.

I took design cues from multiple sources. The tabs were from web browsers. The right- and down-facing triangles to open folders were borrowed from Apple’s operating system, as were the + button to create a new folder or document.

At first the text editing portion of the UI was blank and filled with Lorem Ipsum gibberish. I thought that was a waste of an opportunity for something more useful and decided to put in descriptions and instructions in there instead.

Testimonials

I went back to my three personas — April, Jack, and Terry — for my testimonials. Before this project I didn’t think much of testimonials, but I learned they are powerful. Testimonials connect you to those who are already using the product. I code a little and journal too, so I connect to what Jack (journal) and Terry (code) have to say.

Call To Action

I stuck with the three words — Write, Share, and Collaborate — throughout the landing page. I’ve read on multiple occasions that repetition helps with memory.

Many signup forms require your name, email address, and some form of agreement to a bunch of terms and conditions by way of clicking a button. I think that’s an unnecessary hurdle for testing out a web app. So I got rid of all of that and required the one piece of information I thought was essential: your name. Your name would be used throughout the user interface to make the experience yours. I would ask for additional information — such as your email address and password — if you decided to save your work on Jottly.

This is where the rubber meets the road: have I successfully persuaded you to click on the I’m In button to try Jottly? If you haven’t already, hop on over to DISPLAYBLOG.com/jottly and let me know if I have. Or not.