Category Archives: CGT512

One-week experience on Paper

Facebook launched a new iOS app called Paper this week. 

It has a small and soft launch which doesn’t require you to switch from the official Facebook app, yet it is BIG in terms of its new IxD paradigm, the revolutions it brings to Facebook experience, and its vision beyond the traditional Facebook.

IxD

There are multiple review articles talking about the innovative and intuitive interactions (tab, drag, left-to-right swipe, full-screen format, no refresh button, etc.) Paper is rendering. Also, there is interesting ergonomic analysis on this left-to-right swipe gesture. Besides its sleek fashion of interaction, I am more interested in seeing how Paper fits into our everyday life: as a SNS app, or as a news reader.

Paper as a News Reader

If you take a look at Paper, you will discover that although Paper has aggregate almost all features of Facebook, the original Facebook is only one equal section among all other news sections. In this way, Paper is attenuating the role of Facebook activities and promoting news consumption through other channels. After downloading and playing with it for a while, I naturally put it into the “News” folder rather than the “Social” folder on my iPhone – didn’t hesitate at all. 

So, if Paper is another news reader, why should I squeeze time for it from my already limited news-reading time? Why should I shove Flipboard or Circa away and use Paper instead? 

I like to think from a user’s perspective, so I tried to analyze my needs for news consumption and sharing in my everyday life. I am a normal modern creature who is constantly worrying about missing important news and afraid of drowning in endless news sea at the same time. Context under which I consume and share news: I browse news in breath just to see what is happening when I am waiting for something/someone, and I read in-depth on topics I am interested in (UX, IT product, and entrepreneurship) before bed. Basically, I have two needs for news: topics in breath to show I am not a nerd living in my own world, and topics in depth to improve my professional career. I found Circa and Flipboard fulfilling these two needs respectively. Circa with headlines, highly edited short reads, and ability to push updates on news I am interested let me easily glimpse through and get a good idea of whether the world is still running. Flipboard, on the other hand, is juicy and highly customized to my taste. Instead of offering quick 6~7 headlines per screen as Circa, it usually has 1~3 news per screen, on topics that I have great interested in and from creators that I am fond of (e.g., Verge, TechCrunch, and TNW). I read and I share with my networks in Facebook, Twitter, or G+. 

Circa – quick and dirty, Flipboard – slow but fulfilling. Do I really need Paper besides its original Facebook content? If we look at 4 sources to make news reading delightful and efficient:

  1. Editor’s hand pick
  2. Algorithms to select trending news
  3. Sharing from your social network
  4. Your personal preference

News sections in Paper now only have 2 of them (1 & 2). That means everyone will see the same news on Paper. Besides the lack of personalization, I personally found the design of news tiles in the bottom part of the screen hard to skim – no headlines, with small font size. While instant sharing is another selling point for Paper, it’s nature doesn’t support sharing outside Facebook network. With Twitter account presenting part of my professional image, the narrowed sharing option is not desirable. 

Bottom line:

Facebook is important for me to connect with friends. It also indeed became a news channel for me – offering news curated by friends in my network and media that I follow. Those are core value I gained from Facebook, which is now only a small section in Paper. Do I need another news reader? Maybe. But it really depends on how Paper can squeeze in the crowded news reader market.  

Mobile-only Social Media

The trend has been there for several months – my close friends and I almost stopped posting personal updates on Facebook or Renren (Chinese version). Instead, we share them through “Moments” function in a mobile app called “Wechat”. It happened spontaneously and I’ve been wondered why. Here are my two cents after some examinations.

The fundamental difference between Facebook and Wechat is the mechanism of communication. Though Facebook has message function, which allows people to talk and share privately, it is a platform essentially. Wechat, on the other hand, is a SMS (short message service) at its core, similar to the idea of Whatsapp and Kik. In order to talk to each other, people have to find each other through mobile phone number or other account information, and mutually become friends. On top of sending messages, it allows group chat and has a space called “Moments” where people can share updates with their contacts. Thus, Facebook is a platform SNS with a channel function, while Wechat is a channel service with a platform capacity. How does these natures change our behavior? Why my friends and I chose more carefully what to show on Facebook comparing to those on Wechat “Moments”? Because with a more controlled and closer circle, Wechat is like “the home” social media, while Facebook could be “the city”. People feel safer and more relax to share personal ups and downs at home, and get used to pretend strong and beautiful among strangers. That’s just the nature of human being.

This leads me to think about all the other mobile-only social media applications, such as Path, Snapchat, the original Instegram, and Foursquare. Comparing to PC, mobile usage has the advantages of offering rich contextual information and real-time interactions. SNS big figures such as Facebook, Twitter, and LinkedIn have all made their aggressive inroads into mobile social media market. However, these mobile-only applications have been able to take up a share through leveraging their special niches that match well with the advantages of mobile usage.

What are the mobile-only social media applications that you are using daily? Why you prefer them over Facebook app? Is SoLoMo really the future of social media? Share your thoughts:)

Note: Some of these applications cannot fit with the definition of SNS as defined by boyd and Ellison (2007), so I used the term “social media” application rather than SNS.

A Tale of Two Worlds – Reflections on Distraction in the Age of Internet

“It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was great the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way. ” – Charles Dickens

I never thought Dickens’ classical portrait of the age of French Revolution can be so appropriate to describe the age we are living in – We have everything at our fingertips and we have almost nothing really being preserved solid. We believe and embrace the power of technology wholeheartedly, yet we suspect we are being disarmed by it. We are living in two worlds at the same time: one with ultra-connectivity where we can access everything easily, and one with scattered attention and inability to get hold of what in front of us, and thus full of anxieties and loneliness.

I had some good but long readings regarding Internet usage and distraction (great picks from Dr. V; see the reading list below). I read about how people get used to hopping from one link to another, facilitated by the deeply linked Internet, and are no longer able to read deeply and concentratedly. It is not uncommon that someone ended up browsing the research areas of HCI program in CMU, while initially she was about to start a HCI course on Coursera with Dr. Scott Klemmer, with multiple tabs open in the browser displaying the trail she just went through. And it was too bad that the limited time she had for the course was up and she had to close all the tabs without watching a single course lecture. Yet you know it was not too bad that she at least didn’t end up reading new gossips about some Hollywood celebrities. These easy information hunting might make us “pancake people” who “spread wide and thin” as vividly illustrated by Nicholas Carr.

As these readings themselves are relatively long, it was a good practice and chance of reflection for me. I scarily felt the uneasiness when I realized I need to read such long articles. I had to try really hard to haul myself from checking Facebook and Twitter from time to time, from wondering if the world is still running and if I’ve missed something important while reading. I always know there is a problem with people’s attentions nowadays, but these readings and carefully scrutiny at myself along the reading really forced me to think. What is going on? Who to blame? How to deal with it?

After my trying to comb through the readings and some other things we learned about Web 2.0, I had this map:

Technology and Distraction

Technology and Distraction

It is of course over simplified but it helped me pin point the key joints where solutions might be created to alleviate the issues. In my map, I am an optimist towards technologies. It is technology that expands our vision and capability because ultimately it is our desire to be powerful and probably not many of us would be willing to live an Amish way of life. While it is inevitable that the way we think and the way we consume information will be wired and altered by the capability of technologies, the responsibility of making the best use of technologies is in our hands still. It is information rather than knowledge or wisdom that technologies bring to us. The training needed to turn information to knowledge still resides with us. Education is needed to train people using the Internet in a smart way to harness the benefits and minimize the harm. Design is called to help people regain the ability of focusing.

A therapy is truly needed when many of us are incapable of deep learning and thinking, and paying attentions to people around, because of endless distractions and chaos. No matter one chooses to dive deep in a narrowed lens or spread the time on multiple subjects, the ability of stay focused and generate one’s own thoughts is vital. For UX people, it is detrimental in a special way that the inattention might cause further inability of empathies, which is the bedrock-quality of a good UX researcher/designer.

The first step I am going to try is what Jackson called “effortful control”: reading without access to mobile phone, reading on paper or full-screen on computer, and taking notes while reading to facilitate focusing and later reflection. These were the ordinary way I read before, ironically, I am picking up them again because there might be something the high technology is incapable to offer naturally.

Hopefully, we shall see the “renaissance of attention” coming in the near future and the Tale of Two Worlds will only be a tale to be told.

——————————————–

Here is the reading list (we only read a small part of the books):

Is Google Making Us Stupid? by Nicholas Carr

Distracted by Maggie Jackson

The Laptop and the Lecture: The Effects of Multitasking in Learning Environments 

Cognitive Control in Media Multitaskers

The Distraction Addiction by Alex S Pang

Functional Specs 101

I am taking a course on production pipelines and project management. Knowledge of project management is a great extra to add to skill sets of UX researchers/designers, who are going to serve in a product team and work closely with other functions such as UI designers and developers.

As the UX lead in the course project, I learned quite a lot about the streamlined product development cycle. We as a whole team went through the confusions on procedures of creating Functional Specs, and how to integrate other UX research steps such as user research and wireframes into the writing of Functional Specs.

Here, I am going to share my understandings and learning notes based on several readings and class practices on Functional Specifications (Functional Specs) basics and its role in project executions. I am trying to achieve this goal by asking the following 3 questions:

What are Functional Specs?

In a nutshell, Functional Specs are documents that specify the “what” and “how” of a product – What is the product set out to do? How does the product look like? How do users interact with the product? What are the technologies to achieve the functions? It should include the purpose, look, and behaviors of the application.

Why we need Functional Specs?

  • Function Specs serve as roadmaps for product development. By nature, it provides both the landscape and all the necessary details of a product, which meet the requirements of stakeholders, to the developers. Thus, I view Function Specs as the bridge between frontline-clients/users and backstage developers, groups that are vital in product design but might not have a chance to direct communicate with each other.

Function Specs as a Bridge

  • Function Specs help to streamline the product development process. Through writing Function Specs, the product team can gradually move from chaotic information-gathering stage (with ambiguous and different understandings/inputs)  to reach an agreed vision of the product.

However, this happy ending needs to be built upon quality procedures to create the Functional Specs.

How to write Functional Specs?

  • Do the research to define the product.

This stage is what most UX researchers are familiar with. At the early stage of product development, researches are needed to generate a clearer definition of the product. I view this early-stage research system as a bi-directional system: top-down research approach and bottom-up research approach.

By top-down approach, I mean conducting comprehensive analysis on precedent similar products to (1) avoid reinventing the wheel; (2) get a quick understanding of the product through a short cut.

Bottom-up approach, on the other hand, requires more time and efforts to learn the target users as well as communicating with clients to define the product. User-centered design methods such as ethnographic study, contextual inquiry, interview & focus groups, and task analysis can be used to this end.

  • Create the designer model / represented model.

After gathering and analyzing all the data, models can be used to represent research findings. As pointed out by Allan Cooper in About Face 3 (a must-read for UX designer/researcher), there will be 3 models in a product: users’ mental model, represented model (or designer model), and implemented model (or programmer model).

Users’ metal model represents what users see and understand in front of a product – a perceived product.  This can be studied and represented as persona and persona-based scenarios.

Implemented model or programmer model is the actual mechanism that runs the product, mostly only understood by programmers.

The huge gap between users’ mental model and implemented model is bridged by represented model (designer model). It is through this represented/designer model that users interact with the product. Thus, Cooper pointed out that a good design is having a represented model as close to users’ mental model as possible.

Mental Model, Represented Model, and Implemented Model by Allan Cooper

Mental Model, Represented Model, and Implemented Model by Allan Cooper

Since the represented model is the exact layer we are designing, it becomes the focus of the Function Specs writing. Meanwhile, its bridging nature also means that whatever we are designing on this layer, we should always keep users’ mental model and technical limitations in mind and open the communication channel to stakeholders and programmers.

  • Design the information architecture.

So, when we focus on the represented model, what exactly we should consider? The first and foremost step, as what we learned in sketches, is the architecture of the application. Try to think about these questions: What are the key pages users need to visit? What is the function of each page? What elements and contents should go to each page? After answering these questions, we will be able to establish the structure and flow of the information.

At this stage, flowcharts, interactive prototypes, and wireframes can be very helpful to organize thoughts, represent results, and provoke discussions. Wireframes are extremely helpful to gather stakeholders’ feedbacks on functionality and architecture of the product because it strips out distractive design elements entirely. The core objective at this stage is to get the represented model onto paper, in the form of flow of key pages and navigation design.

  • Design documents

Design documents can be viewed as pre-Functional Specs documents. We can put all we have together and document all the feedbacks. Based on this, more detailed Functional Specs can be built. A lot of iterations will happen at this stage, including redesign of information architecture, visual appearance, and detailed interactions. Through several iterations, the team might be able to get to a clearer view of the product and reach final consensus.

  • Functional Specs

Here comes the final step. To this end, we need to write up the Functional Specs to put everything we’ve been discussing and improving on the paper. This again, makes sure that our clients are aware of and agreed on what we are going to built and the programmers have the “Bible” that they can refer to. More technical requirements (say, which development technologies to use) might need to be discussed with programmer representatives.

So, in the end, what makes good Functional Specs? Check if the Functional Specs have following characteristics:

  • Blueprint. The Functional Specs should give an overview of what this product is about and who are the target users. This helps to build the consensus among the whole team. However, don’t include unnecessary research data (especially those “raw data”) to confuse and overwhelm programmers. A clear table of content is also very important to facilitate a holistic understanding towards the scope of the product.
  • Exhaustive details. Try to include all the teeny-tiny interactions going to happen in the app. Company the explanation with corresponding screen shots. This could be harder than we thought – there might be a lot more “what-if” situation that we didn’t fully consider, which could cause a lot of confusions and communication cost once deployed to programmers. Practice and a good eye is needed.
  • Consistent and concise writing. Use the same design language throughout the document. Don’t use two terms to refer to the same elements. For example, do not randomly use “drop-down list” and “drop-down menu” interchangeably in the same document.

This learning notes are based on class materials, and some more readings, especially the following two. They provide clear and in-depth explanation on Funcional Specs, with great examples.

Functional Specs Tutorial by Allen Smith

Painless Functional Specs Tutorial by Joel Spolsky

Next time, I will briefly review the Agile development model and discuss how we adopt it in our projects.

Promoted Pins Come to Pinterest – How Bad is it?

Tonight, I received an email from Pinterest – beginning with a heart-touching story of how he used Pinterest to collect precious moments of his son, Pinterest CEO Ben then rolled out the idea of experimenting pin promotion on Pinterest as a profit channel to maintain the operation of the site.

We are not new to the idea of content promotion: Facebook and Twitter jumped into the realm earlier. While Pinterest guaranteed that the promotions won’t be disruptive because they will be transparent (you know which pins are promoted pins), relevant (the pins will be consistent with something you are interested in), and listening to your feedbacks (machine learning helps to improve the relevancy), we knew both Facebook and Twitter promotions do the same thing.

So, what do you feel about content promotions so far on Facebook and Twitter? Comparing to Facebook and Twitter, what kind of experience you are expecting for promoted pins on Pinterest?

For me, the more emphasis on content exhibition the site has, the less the effect of promoted content has. For example, the news feed on Facebook is really about the performance of the people. In this case, the sneak promotions are relatively incompatible with the main focus and interests of the users. While on Pinterest, the role of content publisher is really minimized and deemphasized in the visual level with heavy emphases on the contents themselves (see the screenshot below). As long as the smart machines promotes “tasty” pins, which I am pretty sure they are capable of, the user experience won’t be compromised much.

Screen Shot 2013-09-20 at 1.47.27 AM

Sometimes we need to embrace this win-win situation, don’t we?

Social Media as The Battlefield of Marketing

I was at the ExactTarget’s annual Connections conference on Tuesday. It was a great learning experience listening to the talks given by @kyleplacy and @scottdorsey on the state-of-the-art marketing technologies. I paid special attentions (selective attention maybe) to the role that social media plays in digital marketing. Here, I would like to reflect some take-aways from this conference. These points are by no means comprehensive enough to cover the topic of social media marketing, but rather elaborations on the notes I took at the conference.

Brand Co-creation

Brand co-creation is a marketing strategy that tries to achieve amplified branding impacts through engaging consumers. The emerging of social media changes the landscape of marketing, from segmented and passive consumer groups to connected and active consumer groups. This shift is similar to the idea of “context collapse” as discussed in class, as the connectivity and transparency of social media breaks the barriers between different social/consumer groups. By leveraging the power of social media, marketing can be much cheaper and more efficient for the companies and enjoyable for the consumers.

Does the following screenshots look somehow familiar? Are you also part of the co-creation process?

Toms #travellingTOMS compaign

Toms #travellingTOMS campaign

Shutterfly FB campaign events

TOMS encourages customers to post traveling photos with their TOMS shoes in the photos, and Shutterfly asks you to invite your friends to personalize and get a free photo book while you get a 50% discount. When you think about these events and many other out there, you will be amazed by how these events can bring companies thousands of clicks, transactions, brand awarenesses, and storytelling-style advertisements. All you need to pay is some free photo books and let you do the work for them. Also, use of the hashtags (#) makes the brands more recognizable, and makes it easier for companies to gather and analyze the data.

Personalized Experience:

Coming closely with brand co-creation is the personalized experience – individuals create unique experience interacting with the companies through the co-creation events facilitated by the companies. This helps to create stronger bonds between customers and the brands. Another perspective to see personalized experience is from the big-data point of view. By acquiring more and more information through social media, companies are able to deliver more personalized, and context-awared information to customers. Relevance driven by data is the key to create this kind of tailored experience. That is also what we talked about in the first week of class: “data is the internal Intel”. Data is a core value of social media.

Consumer Mobility

Based on a Gartner’s report, by 2013, mobile phones will overtake PCs as the most common Web access device worldwide and that by 2015 over 80 percent of the handsets sold in mature markets will be smartphones. The change of market is not only manifested as the increased quantity of mobile devices, but also on consumer behaviors: based on another report from Gartner, worldwide mobile transaction values will reach $235.4 billion in 2013, with a 44% increase from 2012, with an expected 35% annual growth between 2012 and 2017. All this data is suggesting an important marketing as well as UX-design lesson: whenever a social-media campaign is planned, usage through mobile devices should be primarily addressed.

It was amazing to see how user/customer experience can be enhanced by these digital marketing approaches. This not only helped me to better understand the business behind social media but also provided me with a new perspective to look at UX.

Web 2.0: A Potluck Party

I am a foodie, so I see things a little bit differently.

Last week, we read O’reilly’s article on definitions and characteristics of Web 2.0. Let’s briefly recap the 7 core features of Web 2.0 O’reilly listed in this article:

  • Web as a platform
  • Harness collective intelligence
  • Data is the next Intel inside
  • End of software release cycle
  • Lightweight programming
  • Multi-device
  • Rich UX (not necessarily “good” per se)

After reading, I had a strong feeling that definition is so important – I often refer to the Internet as “Web 2.0” with a very vague idea of what it really is and how it is different from its precursor (i.e., Web 1.0). Now, I have a much better understanding and reliable criteria that can help me to judge whether a digital product belongs to Web 2.0. That’s the power of a good definition and principles. At the same time, I also felt the need of a good analog, as it is easier for us to understand and remember relatively abstract ideas. So, as a foodie, I came up with this “potluck” analog for Web 2.0.

Why potluck? Because potluck means that everyone in the party can bring their food to the party, being a food provider and consumer at the same time. You don’t ever need to wait for the big Gatsby party, with a pre-determined party time and food prepared by a famous party host. Potluck party is really a platform for each individual to present their food, which makes the party much flexible, diverse, and light-weight. At the same time, you can tell the trend of cuisines as well as the season in a big potluck party: peaches are served in many dishes? it’s highly possible that the summer is here. Almond flour is frequently used instead of all-purpose flour? Gluten-free must be in vogue. Last but not the least, you got exposed to very rich flavor of different dishes/choices (e.g., Chinese dishes, Mediterranean dishes, and South American dishes at the same time), but no one guarantees good tastes across the big party.

It’s hard to say no to such a comprehensive and fun party. No matter big or small, you usually bring something to the party (could be an appetizer, a main dish, or a dessert). However, it’d better be a good piece of your work: once it is in the party, people will take a look at it and taste it; so be sure to prepare and offer something proper and nice, and don’t get your personal brand as a good cook smeared.

3 Informative Social-Media-Related Blogs/Sites

As I am searching for good sites or blogs about social media, I found that a lot of them are concentrating on marketing area. These marketing-how topics are certainly trendy and handy as social media is becoming the battle for new marketings, especially for small business. However, I felt them too practical and narrowed for us to read in order to gain a bigger picture of social media. Thus, I gathered the following channels (or platforms!) besides Mashable and ReadWrite, hoping them be of help for us to get a better understanding of social media.

The sequence doesn’t imply any ranking intention.

1. Social Media Examiner 

Social Media Examiner is a very big and successful blog writing about marketing on social media – but its not only about marketing. They have good tips on how to better use SNSs such as Youtube, Facebook, and Twitter, in the form of text blog or podcast. As we are really managing our online identity and personal brands, which is somewhat similar to small business (well, tiny business), some of these tips could be good reference for us to utilize our SNS accounts.

2. FastCompany 

Though FastCompany is not a site that dedicated to social media per se, it offers good source of information regarding pulse of companies that relates to social media. As nowadays a plethora of IT companies are involved with social media to some degree, you can always discover useful and real-time information about social-media strategies of those big companies, especially under its Technology section. I often found these posts resonated well with principles we read from the class while added more practical flavor to them. For example, I read a post yesterday analyzing why Facebook and Yahoo! were that interested in Foursquare, which vividly illustrated why “data is the Intel inside” in Web 2.0 age.

 

3. Soshable

Soshable is actually the kind of blogs that I originally wanted to see when I was seeking for social-media-related blogs. It is a space hosts posts from different bloggers, covering different topics related to social media, including tips for everyday life on SNSs, news on Web 2.0 tycoons such as Google and Twitter, or features of different SNSs. It’s not hard to find useful information for your own targets.

And it has a funny reason to choose such a font in their header section, which almost turned me away from it at the first sight…

Hope you enjoy these resources and share your discovery with me.

An Insightful Video about IxD Big Picture

I came across this great video commissioned by Bassett & Partners, talking about the future connecting world and how interaction design can contribute to it. Many mind-provoking throughts.

My take-aways from it are two points: (1) Embrace “natural” interactions – removing constrains and artificials; (2) Connections among things through sensors and cloud will lead to environment- and context-dependent future interactions. What is yours? Enjoy.



Connecting from Bassett & Partners on Vimeo.