POSTS IN Keg Talk
A discussion of all things related to web design, development, and strategy.
So last week, Transformers 3 came on Netflix, and I thought to myself, how effective is movie/media product placement? I remember when I first watched the Michael Bay blockbuster in theaters, I laughed out loud when I saw the blatant placement in pristine glimpses of Macy’s, Citibank within the wreckage of Chicago. But the movie has many more products splattered throughout its two hours like Lenovo, Cisco, Mercedes, just to name a few. This is a little departure from the digital things we normally talk about here, but it was just something on my mind..
Normally, I wouldn’t have called any movie out for its products, since it’s only natural that some brands and some objects come up. The best writing is specific, as always, so when Ken Jeong’s character names Shu Hua milk, it makes the humor more apparent while giving some script time to the Chinese brand. But I’m not the only one to be entirely conscious of Michael Bay’s many corporate collaborations in this movie. The blatant presence of slow panning shots of brand logos on products such as Lenovo computers and also Cisco systems is overwhelming. In contrast, it’s easier to shake off knowing that the demon car is a Mercedes Benz, a sic one at that, because the fact that it’s a Mercedes is not thrown in your face strongly. According to Brand Channel, this movie wins the 2011 award for most searches of “product placement”, with almost 2 million searches in six months. It also managed to cram an amazing 78 brands onto the screen.
So just how effective is product placement? I suppose it depends on what goals you’re looking for. On one hand, by increasing your brand’s prominence in the media, you create larger awareness for it. According to Nielson ratings, there is quite a high recall for TV. You’re staking the claim that your brand is big enough that stories and movies circulate around it. Modern Family is now one of the most sought after product placement spots – the show is very selective and sparse in their placement.
But this could just as easily backlash with your audience being annoyed. Brand Channel quotes blog Slashfilm who critiques the Cisco placement in Transformers quite succinctly,
“…Cisco shows up at so many random points in this film — for video conferences that, in other films, would not be branded, and as a strangely prominent router in another situation — that it’s absurdly distracting. Assuming Cisco did sponsor this movie, what did they hope to gain? Is there a huge overlap between the target audience for this film and Cisco Telepresence? Are high-powered executives really watching this film and saying, “Hey, we should get that for our international offices!” Are military brass really watching this film and saying to themselves, “Glad we integrated that Cisco Telepresence!” What possible purpose could this sponsorship serve?” Watch an excerpt of Cisco here.
Still, the sponsorship serves quite basic means: to ingrain the brand name in your mind. In that, Transformers succeeds! Hundreds of blogs are talking about the product, and despite the critique, the brand name is making its way through the masses. It’s a simple strategy. Customers are most likely to choose the brand that resonates with them, the one they remember.
The more interesting side of Transformers’ product placement is the rise of Chinese brands in the mix. Chinasmack notes Lenovo, TCL, Shuhua and Meters/bonwe (fashion), as just some of the big names appearing. The WPP press release for Lenovo by Ogilvy says that this collaboration with Transformers is part of a global branding strategy, aimed precisely at amplifying awareness internationally.
But let’s consider the future of product placement and ad-spots. Ad Age writes that commercials and content are becoming indistinguishable nowadays. Writer Brian Steinberg even goes as far as to blame consumers for product placement, by reminding us that advertisers now weave marketing into programs and movies because 30-second ad breaks in programming just aren’t cutting it anymore. We have remotes that fast-forward, change the channel, and with Netflix, non-commercial streaming as well. We can’t ignore that these corporate sponsors are also responsible for funding the programs we love so dearly such as American Idol and more. Product placement becomes somewhat of a necessary evil…
Working at Barrel usually means sitting in the same position for many hours straight. While we get up occasionally for restroom breaks, lunch time, or walking to and from the conference room, most of our day is spent on our butts.
It sounds like it’s not a big deal, but poor ergonomic practices can lead to injuries: carpel tunnel syndrome, neck strain, lower back pain, leg pain and death.
Okay, maybe not death, but I wanted that dramatic punch.
What is “Ergonomics”?
Ergonomics is the study of the kind of work you do and the environment you work in. It strives to make the workplace as comfortable as possible, minimizing stress on the body and preventing work-related injuries.
Ergonomics applies to both those workplaces where daily activities include manual labor, and workplaces where people sit at a desk all day. Since Barrel falls into the second category, this post will only focus on that kind of workplace.
To study the ergonomics of your workplace, look at things like:
- How you sit
- Your workstation setup
- How long you stay in one position
- The light, air flow, and temperature of your work area
Now that you have a basic understanding of what office ergonomics is, let’s look at how you can put it into practice.
Set Up Your Workstation
Credits to CAP Workplace Ergonomics Reference Guide
Ideally, your workstation should look like this. I’ll break it down by different parts of a typical office workstation.
You should have a viewing angle of 35-40 degrees.
When you’re sitting straight, your eyes should be aligned to the top of your monitor without having to bend your neck. You should be 16-24″ away from the monitor (roughly arms length), with a viewing angle of 35-40° from the top of the monitor to the bottom.
Make sure your monitor is directly in front of you, so you don’t have to twist your neck to look at the screen. Staying in an awkward position like this for six hours can cause major neck strains.
- Tilt the top of the monitor back 10-20°
- The monitor should be at right angles with windows and positioned away from direct lighting to reduce glare
- Consider using a glare filter
Throughout the day, many of us end up scooting to the front of our chairs and slouching over to look at the screen. Instead, sit with your back against the chair and shoulders touching the backrest to support your lower back, shoulders, and neck. If your chair doesn’t fit your body shape, use a rolled towel or lumbar pad for support.
Your legs should be bent 90 degrees, with your thighs parallel with the floor. Your feet flat on the floor or on foot rests (Zack uses business card boxes as his foot rests!).
- There should be 2-3 inches between the back of your knees and the edge of your seat
- Adjust the height and width of armrests so you can drop/relax your shoulders while typing
- Your knees should be at about the same level as your hips
Keyboard and Mouse
The best placement of the keyboard and mouse is 1-2 inches above your legs. This usually requires a keyboard tray. Forearms should be parallel to the floor to allow the shoulders to relax.
To avoid stress on wrists, they should be in a neutral, straight position (not flexed or twisted). Remember not to rest your wrists on the table while you type or use the mouse; keep them in the air or use a wrist rest.
When you’re not using the mouse, don’t rest your hands on it. Instead, rest your hands on your lap.
It’s kind of common sense, but your office should be set up with comfortable temperature and lighting, good air quality, and proper air circulation. Cover your windows to reduce glare and minimize eye strain.
Zack shooting the mini basketball into the mini hoop.
Most office-related injuries happen from staying in the same position for too long. Our body is able to handle 20 minutes of the same position at a time; staying in one position for any longer than that causes discomfort and builds up stress.
To prevent eye strain, blink constantly and try to expose your eyes to natural light. Every 20 minutes, refocus your eyes away from the computer screen to a window or an object at least 25 feet away.
Also, give your body a break by taking walks around the block or standing up every 20-45 minutes. Adjust your posture from time to time, play ping pong/mini basketball and do some stretching exercises! Here are some stretches you can do during the workday:
- Bring your shoulders up to your ears for 3 seconds
- Slowly rotate it back and down
- Repeat 20 times
- Slowly rotate each foot in circles while sitting 3 times in one direction
- Repeat 3 times in the opposite direction
Diagonal Neck Stretch
Photo from ORS
- Look down at a slight angle for 15 seconds as if looking at your pocket
- Repeat 3 times on each side
Give your eyes a break
- Rest elbows at the edge of your desk
- Cup your hands gently over your closed eyes, letting your weight fall into your hands
- Inhale slowly through nose and hold for 4 seconds
- Continue deep breathing for 1 minute
The best way to prevent negative consequences from sitting all day long is to simply alternate positions. Exercise both in and out of the workplace. Try to change up your tasks; if you’ve been designing for a while, take a client call or get up to water the office plants. And don’t slouch!
Here are some great resources for learning about office ergonomics:
CAP Workplace Ergonomics Reference Guide
Office of Research Services
WebMD Office Ergonomics
On our first day in, Peter gave me a book to read called Designing Brand Identity, by Alina Wheeler, and I found the section on brand history fascinating.
Brands are much more than just their logos and names, though nowadays we tend to conflate them in our minds. Logos, especially, are imbued with meanings way beyond their graphic symbolism.
Consider the Nike brand logo. From that one swoosh, we see the entire company. Our minds immediately think ‘Nike’, recalling ‘Just Do It’, and imagining Michael Jordan taking flight on the basketball court. We perceive the swoosh as indelibly linked to sports, a can-do attitude, running shoes, energy, health, and more. But when it was created, the company wasn’t even called Nike. Nike was simply the name of a line of shoes they were creating.
Blue Ribbon Sports took the name Nike from the Greek goddess of victory. The fact that I never actively made this connection baffles me. Me, someone who studied Greek history and art, who knows for certain that the Nike of Samothrace, one of the iconic sculptures of Greek classical art, is from the 2nd century BCE. The thought must have been at least in the back of my mind. Like, duh. Nike, or victory, applies easily to sports games, competitions, and also the “Just do it” slogan (which didn’t appear until 1988 thanks to Dan Wieden of Wieden+Kennedy). This shows how much precedence the brand Nike has over the term ‘Nike’ in my brain. Isn’t it amazing that brands can operate on that level in your mind? ‘Google’ has entered our vernacular; we also ‘tweet’ and ‘facebook’. Wieden’s claim that brands are verbs has held true..
In 1972, BRS only payed about 30-some bucks for the iconic visual. The swoosh is an abstraction of the goddess’ wings, in essence, a visual derivation of Nike. But over the years, Nike has consolidated their branding to place this visual everywhere. You can’t help thinking about what Nike embodies when you see it. Its history of Greek classicism has become entirely unimportant; Nike refuses to rely on that connection to make their stamp on the world.
Similarly Apple lore tells us that one of the reasons why computers were named Macintosh, might have been for Jobs’ favorite apples: McIntosh, making it a completely random, un-related choice. Google may even have been the result of a fortunate type of the unit ‘googolplex’. But now these brands are household names with specific public perceptions. Google is a synonym for clean search and whimsy on the net. Apple is known for their sleek and well-designed products.
I don’t think these stories dispel myths and beliefs that a name is centrally important in developing a business. Although a clever brand name or a logo can help you, many of the things that make a brand lie outside of it, actually. Still, it could be the case that these examples: Nike, Apple and Google are the exceptions. But more often than not, I find that it is a funny, throwaway, not fully strategized name that becomes the household name. I heard Gilt Groupe founder, Alexandra Wilkis Wilkinson, speak once, and as it turns out, “Gilt Groupe” was also partial happy coincidence.
Some other sources: The Atlantic, Adweek, Stanford, Hubpages 1 and 2.
Parallax websites are the new cool kids on the web design block. Everybody wants to create one, but few really know what makes a parallax website good.
Parallax websites use a special scrolling technique where the background image moves slower than the foreground image, creating an illusion of depth. Originally used in the multiplane camera technique of traditional animation since the 1940′s, it makes a website feel more interactive and dynamic.
When used correctly, parallax scrolling can be absolutely stunning. However, many people are using the technique blinding; the results, no matter how eye-catching, consequently lack meaning and the foundations of good design.
If you’re thinking about jumping into the parallax trend, make sure you keep these best practices in mind:
1. Have a Reason to Go Parallax
Don’t build a parallax scrolling website just to make it look “cool.” You should have a point to using the technique other than pretty graphics and animations. Know why you’re using parallax scrolling; not all websites will work well with this technique.
Here are some websites with awesome concepts to go with their awesome parallax websites:
Krystalrae is a Filipino-American Fashion Designer based in New York City. She uses parallax scrolling to showcase her designs in an innovative way. Her model changes outfits as you scroll down, making it easy to go back and forth between your favorites.
The photoshoot must have been intense for this concept.
The first issue of Eephus League’s Magazine is incredibly well-crafted, not to mention “mind-blowingly” beautiful (I’m pretty sure that’s not an actual word). As you scroll through the website, you feel like you’re flipping through pages of an actual magazine. There’s a refreshing balance between clean, minimal pages and stunning editorial-looking photos and illustrations.
Eephus League Magazine features beautiful typography and full-page photos.
2. Good Storytelling
A parallax website is most effective when it brings the user on an adventure. The nature of parallax scrolling makes a website feel like a video game or movie, so it makes sense to craft a captivating story. Plus, this gives the website the underlying purpose it needs.
Bomb Girls is a Canadian television show about five working women in a Canadian munitions factory, building bombs during WWII. Their website brings you on an adventure through the factory, rooming house, and parlour, where you can discover videos, news articles, and behind the scenes contents about life in the 1940′s.
Explore the worlds of each Bomb Girl, set in the 1940's.
Ben the Body Guard is an app that protects your passwords, photos, contacts and other information on your iPhone or iPod Touch you’d want to keep private. Ben walks you through the “mean streets”, talking to you about security dangers as you watch robbers run across the screen, spot dead man outlines, and get a glimpse at an unsettling torture scene through a ceiling window.
It’s a wonderful way to combine engaging storytelling with meaningful graphics, building trust and a completely memorable brand.
Ben gives you a tour of the most dangerous neighborhood I've ever seen.
This experience starts off with a full glass of Michaelberger Booze 35% at 12 o’ clock. As time goes on, you drink more and more until things start to get weird and you find yourself in a cozy autumn scene complete with a campfire. When you’re finished with that, you’ll drink Michaelberger 45% and get transported into a breathtaking world in the sky. This is a great example of using good story telling to attach ideas and emotions to products.
I'm looking forward to my campfire after drinking some of this.
3. Clear Navigation Between States
Parallax websites are definitely not conventional, and the lack of familiarity with the user interface can be daunting. Giving users an easy way to jump from one part of the page to another may help alleviate that. It’s best if the navigation is fixed and always visible, even as everything else on the website is moving in all directions.
When you scroll past a certain point on Whiteboard’s website, a navigation bar appears at the top of the page. Instead of scrolling up and down the whole page trying to find what you’re looking for, you can quickly jump to different parts of the website. This is a good way to combine traditional magazine with the visual punch of parallax scrolling.
Whiteboard is a creative agency with a well-done portfolio.
Digital agencies obviously know their stuff about good user interfaces! Unfold’s parallax website features a whole lot of moving abstract shapes that can get somewhat chaotic. Coupled with a looping scroll (when you get to the bottom of the page, the website starts back at the top seamlessly), it’s easy to get lost in this splash page. Luckily, they keep their navigation fixed at the top right corner of the screen.
Also, you should really check out their interactive map.
And this is just a placeholder while they get their REAL website up.
4. Don’t Forget About Communication
Good design focuses on communicating a certain message or idea. Sometimes, designers may get so caught up in creating a vivid parallax experience that the content starts to play a secondary role. Remember that users are on the website to achieve their goals; let the content speak louder than the aesthetics. The best way to do this is to keep animations simple.
The only parallax effect on this website is the content sliding over static background images. It creates a nice effect while not going overboard with flashy animations.
I love the chalkboard style menu!
Jan Ploch’s portfolio starts out with over-the-top animations of a training soda bottle, but the effects take a backseat once we get to the content. I’m able to look through his work and read about his process without getting distracted.
I'm not really sure why his website is half in English and half in German though.
Overall, it’s easy to lose sight of the main goal when designing parallax websites. It’s a new toy for designers (and developers), so we tend to get carried away with shoveling on as many effects and graphics as the website can hold. It’s worthwhile to take a step back and ask yourself whether you really need parallax scrolling for a particular project. Keep things simple and easy to navigate.
Don’t make it pretty – make it a good design.
Barrel’s no stranger to start-ups and web-apps. This morning we got to hear a pitch from Cosiety, a new website designed to help cut down the cost of buying textbooks as well as facilitate note sharing. It is being developed by CUNY Baruch students and is currently targeting the CUNY school system. Since we are all students, we thought we’d share some of our opinions.
Cosiety gives us a brief on what problems their concept solves.
Students are spending too much money on textbooks every semester; over half their academic expenses outside of tuition is spent on books.
Enter Cosiety. Cosiety promises to be a solution: providing convenient and affordable options for students within each campus to exchange and buy used textbooks from each other.
We think their premise is entirely valid. We’ve all emptied our pockets over textbooks before, spending more money at the campus bookstore rather than searching for cheaper ones online, or among friends. But, each campus often has their own solution for this. Discount bookstores, platforms such as Columbia’s Dormslist and Books on Campus are some of the many alternatives. Cosiety promises to differentiate from these with the addition of notes buying and courseboard forums.
While these are great ideas, they lack accountability. There’s no guarantee that you’re going to get good notes or good answers on the forums without achieving a critical mass of students on the site. For example at Cornell, many classes use Piazza as a discussion platform, where TAs and professors can both validate student answers as well as answer questions themselves. Cosiety founders want to exclude administration because they feel professors would frown upon the sharing of notes. They acknowledge that they’re going to have their fair share of backlash from the academic community most likely with claims of cheating, plagiarism, and possibly even intellectual copyright violations of professors’ lectures because of the intent to sell.
One step in the right direction is Cosiety’s refund policy, for notes that are simply not up to standard. They are also instituting a ratings system, where buyers can rate notes that they have purchased. However, a possible problem that might arise is the buying and subsequent sharing of documents without further purchasing. Furthermore, a ratings system requires a large body of users in order to generate useful information.
Their Business Model:
Cosiety had a few graphs centered around projected sales, but it was hard to follow.
Cosiety’s revenue projection is very optimistic, and capitalizes solely on the notes buying portion of the application. The math was… interesting, and pretty difficult to follow. They estimate 20,000 people — 4% CUNY market share — to be downloading 12 sets of notes each (we may be blatantly making this stuff up from memory). At an average of $1/set, that is $240,000 per semester. But their total sales prediction amounts to a whopping $600,000. We might have gotten lost in the numbers, but that figure is surprisingly high.
They are also expecting to profit from both ad revenue and partnerships with companies such as Amazon and Apple. This is not likely to happen until they are firmly established, which will probably not be in the near future.
Cosiety didn’t seem to have a strong marketing campaign, relying mostly on word of mouth and hard sells. We think that this strategy will be relatively effective in a student population, because we tend to trust and explore information from peers and users. Word of mouth is a powerful tool amongst our generation, but we question whether the word will spread fast enough or whether they will generate enough early adopters to start a useful community on Cosiety.
But the primary reason that Cosiety stepped into Barrel office this morning was to get UI, UX, and design feedback from us. There were two primary layouts in their presentation: it was pretty unanimous that we liked the second, however it is the first that is being launched. We thought the organization in the second was easier to understand; the first lacked a clear hierarchical structure. There was also a distracting, long, neon green sidebar navigation.
User experience could in Cosiety could be enhanced by social media integration, but currently the site exists outside of Facebook and Twitter. A profile with ratings from past transactions would also help users buy notes and make products more trustworthy. Great experience leads to further use!
As students that have been exposed to many similar applications, we have some reservations about Cosiety’s structure and business model. Especially since many of these systems are university-endorsed and not for-profit, we foresee many barriers for Cosiety to become a universally accepted platform. Nevertheless we wish them all the best, and think that campuses without any similar websites will adopt the app readily.