TRICIA PUNO

[triciapuno]

First thoughts on Microsoft Edge (RAW)

Thought 1: Given the plentiful negative associations with Internet Explorer, why in the world would they chose to resemble the icon?

Internet Explorer, despite being described as an inferior browser, has the most diverse users in terms of age, occupation, amount of usage, etc. The logo still represents "This is the gate to the internet". In combination of transitioning its audience and appealing to the new, this is the result.

This to me, is great. It shows that they care very much about branding and appearances, all the while taking a step back and see what users would actually use. User testing has been shown that positive transference is greatly needed for the succession of an interface. The "E" icon follows this, as it is known to everyone who is familiar with the web. Microsoft made sure that this message, "This is the gate to the internet" (arguably the most important message) still stands. Sure enough, even with Google Chrome dominating as the most-used web browser in the U.S., Internet Explorer still has the largest desktop presence. With this in mind, the logo design decisions--while not clamored by me, become logical.

However, after all that, I feel that the browser design itself pretty much kicked this user-considerate notion in the shins. The shiny Microsoft Edge user interface is completely different, even when compared to the lastest, Internet Explorer 11!

Microsoft Edge

Internet Explorer 11

I just hope that they've done enough user testing to warrant the what it seems like a completely new tone, new look and the most important part, new functionalities (I'm looking at you, Cortana) introduced. We've seen little so far into the actual browser, so I will hold my breath and wish for the best for the sake of Microsoft.

[triciapuno]

Periscope: User Interface Breakdown

Periscope, a live-streaming app by Twitter, launched just a few days ago and already it's bravado connection with the social media giant has it's claws dug onto users. As I write this, Periscope already has a whopping 400 reviews with an average of 4.0 stars, and is already crowned by many users in design-excellency:

"@periscopeco is hands down the best designed app since @instagram. New standard for UI/UX." https://twitter.com/jtriest/status/561972497844023296

The app's purpose is to create an easy to use, easy to interact live-streaming environment for the broadcasters, and audiences alike. This creates a prominent branch off of the world of live-streaming creation, and its' audience.

Live-streaming, long ago, was quite a process of set-up and preparation, that involved multiple, supporting programs from screen capture, hosting, video and audio calibration. Live-streaming, in its' best form requires costly effort. Even with the simpler UI's (user interface) that was created for the sole purpose of easing the process, it is undeniable--Periscope is currently the fastest and easiest (albeit basic,) way to stream, so far. Coupled with it climbing the app ladder and an instant contender with original live-streaming app Meerkat, Perioscope is on it's way to become a native (home screen) app for millions of users.

So why is it the way it is? A couple of key things:

1. It's everywhere:

I downloaded the app this morning, and quickly did I find it since it's plastered on both "Editor's Choice" and the first app listed on "Best New Apps". This is a great example of paid trigger as described in Nir Eyal's Hooked:

"Companies generally use paid triggers to acquire new users and leverage other triggers to bring them back."

It being on the front page of the app store, as a user, whether I realize it or not, I instantly acknowledge it's existence. Better yet, it being featured twice actually doubles my curiosity--and the trigger is off. In addition to the hype around the web, this app is now part of my life (dramatics aside) just by exposure.

 2. It's recognizable:

Other than the fact that the app hype centered around Twitter (for obvious reasons) as creatures of fast-thinking (humans will always first base decisions out of at-the-moment convenience rather than the conscious-costly, slow-thinking,) we depend on cues to help solidify our impressions of everything, instantly. One of these cues, centers on what we see, and how we interpret it. Periscope's logo is a good example of this. The instantly recognizable location icon, gives familiarity to the users, as it implies yonder of places and destinations, relative to where the user is. Seen prominently on Google Maps, the icon gives a notion of "I am here", and with the red dot that is familiar to the users as 'LIVE' and 'RECORDING', the logo--in my opinion says what Periscope is, without saying anything at all. The aqua blue background, connecting the relationship with Twitter, also translates corresponds confidence and dependability to the user, in terms of color psychology.  

 3. Easy-peasy user interface:

Opening the app, Periscope does a good job reinforcing what it is and what it does by showing it in plain sight-- the live broadcasts from anyone, and the people watching. The app's front is divided by three sections that have different purposes:

TOP OF THE APP: (landing page): featured streams, rendered in large boxes (two can take up the whole screen, but there are in fact, three of these). The prominent "LIVE" call-to-action button on the top left, drenched in easy-on-the-eyes muted red draws my eyes right away, and cleverly, placing the audience count with a person icon next to it (left to right) materializes my curiosity:

There are 17 people watching this one stream. I wonder what's so interesting about it?

The differing large, image backgrounds are provided for each box (a screen shot of the stream, taken by Periscope) is well done because immediately, I know--there's something behind this box (the stream).

I know that the app is barely a week old, but I can say without a doubt that some canny users will take advantage of the screenshot previews to showcase an interesting image to draw more users into their streams.

 AS I SCROLL: The streams are then condensed from the large boxes to a number of bands, giving a compact feel--but not in actual practice. Periscope has turned the preview image into a square icon, filtered in the muted red with the same "LIVE" text (or grey, if offline). The title of the stream is displayed to it's immediate right. The audience count, now moved to the far right is the most compelling trigger here. As you see acknowledge the streams in bands, unconsciously you begin to compare them. Which should I watch? Judging by the numbers to the right, you can see the different numbers in a uniform fashion, one after the other. I'm more compelled to click on a higher audience count rather than a lower one. If a lot of people are watching this, it must be interesting.

We must remember that Periscope is a business. Whether or not a user chooses a high audience stream or not is not a top priority. The users are using the app, and that really is the conversion here.

At this point, it is easy to see the design reasons as to why they chose place the audience count to the right of the bands versus next to the "LIVE" CTA (call to action) on the large boxes:

1. The larger boxes had an eye-drawing CTA, and certainly the users will notice this first because it is the first and most apparent text after entering the app, against the vast space of the preview image. Placing the audience count next to it is using the practice of our left-to-right reading flow. So in a sense, the placement is only natural.

2. The following bands had the audience count to the right due to:

-Reinforce the real estate of the band, left to right by applying a visual anchor with the audience count.

-Equalize the importance of the bands vs the large boxes by placing emphasis in audience count. 

We must remember that the large boxes did not have the same design intentions of the bands, primarily because the real estate is quite large, that the user focus is narrowed to those individual streams. The thought process is that the after stimulated, if it is not enough to convert the user into an audience, users scrolling further down to the band system will be tried again to a more compelling trigger--the ability to chose a stream based on comparing the audience count.

The easy back and fourth transition between being a broadcaster, to being part of an audience:

To be continued.

[triciapuno]

Paper.js: Just As Essential As Real Paper

Paper.js is an open source, vector-based scripting library that has Javascript as its’ framework. Launched in June 2011 by the makers Jürg Lehni and Jonathan Puckey of Scriptographer (a scripting plugin for Adobe Illustrator since 2001), Paper.js is currently embedded in the Canvas manipulation market, as another tool that implements generative design (image, sound, models, and animation is made possible by algorithms). Paper. js is known for integrating with HTML5's Canvas element (an element that allows for integration of animations, drawings, and other dynamic properties onto the webpage). In a sense, Paper.js’s expansive library makes it possible to script high-level, high-performance animations with less coding.

This Javascript-based web technology has anchored itself the most into the graphical side of the web, especially vector scripting. As described on their website, Paper.js is just Javascript with mathematical implementations for their basic types such as point, size, rectangle and matrix. This is typical for manipulation of vector mathematics, however what makes Paper.js stand out is the well-thought out, simplified, high-leveled functionality. Some of these are simplified syntax with user interface, and styling properties such as blending modes; seen in Adobe Photoshop and Illustrator, emulated in Javascript.

Paper.js prides itself as an easy to learn skill for beginners, but also wields mastery for those who seek it. To do this, the creators of Scriptographer had it in mind to keep the current workflow of programs such as Adobe Illustrator and implement it onto Paper.js. Some of the many abilities include manipulation of constructed paths to yield segments and curves, including simplifying paths through points. Authors can also have complicated stroke styles that are supported but have simple editability along with precise bounding box manipulation. With the similar characteristics Paper.js has with Adobe Illustrator and Photoshop, authors have a higher and faster rate of transitioning and acquiring Paper.js mastery because of the functional familiarity.

One of its specialties of Paper.js is not only user-friendly for the users and readers, but for the authors themselves too. Paper.js provides flexibility and editability in code. Originally from the Adobe programs, blend modes (color dodge, soft-light, hard light, multiply, overlay, screen, darken, lighten, difference, exclusion, hue and saturation) can now be requested and implemented right onto the HTML document. Not only will the graphic have the ability to animate seamlessly, but it will also change in presentation without the hassle of file-alterations.

With the power to fuel multiple animating possibilities, Paper.js also has its limitations-- some of which are notable, such as support and performances issues. Paper.js cannot support browsers under Internet Explorer 9, Firefox 4 and Safari 5. It will however have full support on Chrome. With these in mind, all other browsers such as Opera, even if not as big of a contender, will not support Paper.js. The fact of the matter is that while Paper.js becomes more and more of an essential to a web developer’s toolbox, the narrow support it has can be damaging and unusable to the number one audience web developers cater for--the users. Paper.js knows this as they claim to aim modern browsers that support HTML 5 and EcmaScript 5 (the client-side scripting language on the web and the organization that standardized Javascript).

Performance can critically hit for Paper.js, even if it stems from HTML5's canvas elements. HTML5 elements are rendered through CPU (Central Processing Unit), and this includes the canvas element. This is problematic because Paper.js’s stronghold is vector graphics. Rendering graphics, animations, drawings, sounds, etc would not be efficient when run under CPU. On the other hand, GPU (Graphics Processing Unit), where video games allocate rendering, is a better fit for graphics optimizing. Until the HTML5 canvas element can uniquely process under GPU, Paper.js will not only be set back by inheriting any constraints from HTML5, but will also not be able to be used at its full potential. Some current solutions to reduce these problems include carefully grouping your code to minimize calculations and running tests such as animations running on slower hardware.

Paper.js is one web technology that expands possibilities for rendering a web page. With the familiarity of workspace and functionality with Adobe Illustrator and Photoshop, Paper.js is a code-based, creativity-enabling tool. Even with its’ current performance and support problems, Paper.js’s worth and value outweighs everything else, as it is an enhancing skill addition to any web developer.

[triciapuno]

HOOKED: Parellel of Web Usability

Today, marks the last day of the collegiate spring recess that I spent lounging with my sunglasses on, fending the bright, near-painful light of our snow harvest season. It also (roughly) marks the same time I purchased my newly-devoured reading supplement, a fascinating, habit-psychology book called HOOKED by Nir Eyal.

This book, while found on the MARKETING section of Barnes & Noble, actually pertains a lot to the usability force. It speaks for the very persons we both cater for--our users. With Eyal's focus on web-based products such as apps and task-basked websites, while reading the book--the before and afterthought of every usability persons are nearly parallel to Eyal's Hook Model:

The 4 stages described:

1. Trigger Phase: "What does the user REALLY want?" No, I am not on Reddit because I want to see cat pictures or decide whether or not I should indulge in a "NSFW" post. What I REALLY am wanting is to deter my state of boredom. This is what I get when I'm stuck in the winters of Michigan, it get out of control here sometimes. Yesterday, I offered to be a designated driver for my dad.

Anyway, I go to Reddit, because I am bored. This is my internal trigger--the "itch" as Eyal describes it.

UX: This is the problem the user is experiencing. This is identifying the problem.

More examples of internal trigger: - "I want to know ahead" user may use weather.com - "I want to impress my friends" user may use pinterest for ideas - "I don't want to feel left out" user may use facebook to connect with friends

 But wa-la, thanks to my iphone and the solid-state drive of my new Surface Pro 3, I can reach Reddit within second because it sits as of my home pages for my Chrome browser. The fact that my browser is always on, and the tiny alien icon forever visible, serves as an external trigger. The fact that Chrome has the bookmark function for any website, and that Alien Blue, Reddit's mobile app is accessible (and just like the concept of Reddit, the app is on the 'front page' of my phone).

More examples of external trigger: - "You have 3 notifications on Facebook" - "SAVE NOW! BOGO 50% Off!" - "Your pet Buster is hurt! Check on him!"

Call to Actions (CTA's) are also considered an external trigger like the LOG IN and SUBSCRIBE buttons.

All of these external triggers, prompts users to do something. Thus,

 2. Action Phase: Even though our sematics with the word equates to 'active', for the web this is not the case. Simplicity is key. Eyal comments "doing must be simpler than thinking".

Someone replied to the thread I was watching, which the website alerted me (external trigger) and I like their reply. I will upvote it! *click* 

There. There is your action. Congratulations, you just worked seven muscles to control your index finger for that one click.

More examples of the Action Phase: - You're on twitter because someone retweeted your tweet and Twitter gave you a notification (external trigger). You are curious about the person who retweeted you (your social validator in this case, relieving your internal trigger of boredom) and begin scrolling through their Twitter home page (action) and find out you have similar interest, so you decide to follow them (action).

UX: As a UX person, it is our duty to make the actions of our users as painless as possible, even more so than thinking. Whether it is making the UI visible and easy to spot, to wording our content scan-able. If the website has a reputation for restocking out-of-stock items and the user has signed up for email updates, the email should contain a 'call to action' button that prompts them a step less. Instead of having a CTA to the product's page, it should direct them to their carts with the new addition.

  3. Variable Rewards Phase: Here, we get to the point. This is where we give the solution to the user's problem. So I was bored, so I went to reddit. Reddit gives me a thriving, endless scrolling of contents from ISIS to whether or not that dress is black/blue or white/gold. Now I'm paying attention. Now I am no longer bored.

Thanks, Obama.

More examples of Variable Rewards: - I am vain and want to show off (internal trigger) my haircut. I post on facebook (action), and I get 27 likes... for now (variable rewards). - I am a lonely soul (internal trigger) so I downloaded the Tinder app to see if anyone is interested. When I get a "match" notification (external trigger) I check it out and hey, he's cute. I will message him and see how it goes (variable rewards). - I follow 2,345 people on twitter. Surely everyday someone in that 2,345 will post something on twitter, so I check on it, as it updates itself (variable rewards).

UX: Presentation of the solution is just as important as the solution itself. Just this morning I was keen on searching flights for my vacation. The Philippine Airlines' website had answered my question of how much it would cost to fly from Manila to Palawan, round trip. However, finding the answer itself, was like finding a hay in a needle stack-- painful distractions, everywhere. By the time I found it I had to look around again to confirm the dates, since just finding the solution made me uneasy and distrusting of the site.

 4. Investment Phase: There is a point where in every website and product we work on, we always aim for retention, for users to come back. That's why Eyal emphasizes the importance of user investment on the product. Without any personal attachments from the user, abandonment of the product looms ahead. That's why Pinterest, deemed an excellent follower of the hook model, and especially the investment phase--the users have their own 'boards' they came up with, their collection of 'hearts', own photos, content, and etc.

More examples of Investment: - I have made a Charr guardian level 80 with tier 3 armor, hoelbrak runes, and expensive weapon skins. I am not about to delete this character anytime soon, with the amount of effort I put into it (investment). - Even though I know that wordpress.com pertains to a more 'professional' blogging reputation, I already know and have an account on tumblr (investment) - Photoshop interface is terrible on my Surface Pro 3, but I downloaded it anyway because I have a certain level of mastery using it (investment).

UX: With a well-thought out interface, we unconciously give our users confidence and sense of competence. If it is easy to navigate and get from problem to solution, the user will have a good experience and will likely comeback. This is why creating a user base goes hand-in-hand with good UI. If the experience to find the solution was seamless, returning and investing should just be as easy. When I am reading an article and have to stop, I can just press the 'home' button on my iphone, lock it, and be on my way. To get back, all I would have to do is go back to safari--the first thing I see is where I left off.

 Nir Eyal's HOOKED may only seem like it swells on the Hook Model, but it delves even deeper into the psych of user reasoning (logical or not, it's whatever makes sense to them, what it is they really want). He provides a multitude of case studies and practical comparisons rich in his explanations of today's most  successful and addictive products. He closes the book with a note to the morality of healthy habits, and encourages everyone to look and create ahead for the new wave of technology and form the habits. And as a UXer, it our job to give users the ability to make the best out of the product.

10/10 Would read again.

[triciapuno]

Don't Keep It Waiting.

Ha. I was about to write a simple introductory post that concerns the usability engineering path I am just embarking and already I have stubbed a toe just trying to edit "Your Text Here" function in the process of creating this very post. The function didn't let me edit and betrayed the seemingly seamless interface of the rest of this blog-giant. Well, good news, folks. Minor hiccup, all I had to do was think and-- refresh.

Tumblr form function: 7.5/10 after the glitch. Hey, It was a cost (albeit a small one) to my cognitive.

Hello, this is Tricia and Usability Engineering of the Web.