Shut your eyes, and look again, the whole world has gone upside down.
Boiler Room
Ideas, names, thoughts, sushi, branding, photography, mice, anything goes.
Tuesday, March 26, 2013
Hide Artboard boundaries in Photoshop CS5
Similar to Adobe Illustrator feature
In Boiler Room | trackback | Tweet | Share on FacebookHiding the edges of the artboard is available in Adobe Illustrator, and I cannot recall, but I could swear it was available in earlier versions of Photoshop, under View menu. I Googled it and found no reference to it, but I knew it was possible. So I had a couple of hot tea cups (it does enhance intelligence and focus!) and looked through all options in Photoshop CS5. And found this:
Under preferences > Interface, set Standard Screen Mode : Border to None. Yippee!
Sunday, April 8, 2012
Separation is king, mixing is toxic
Layering interfaces for web projects
In Boiler Room | trackback | Tweet | Share on FacebookI’ve been coding and designing for 15 years now. hard to believe! I can’t believe it myself. Here is one lesson I learned about coding in general, some of it is self-evident, some is exclusive, not that I have discovered it, but that I can’t find a lot who would agree.
Why Semantic HTML
The obvious reason is because it is more scalable and error-prone, if you use semantic HTML while developing on one browser, odds are very high that it would work on all other new browsers, mobile, tablets, and future browsers, and if you’re lucky, some screen readers too.
Another subtle reason is maintainability. It’s not following semantics that makes it easier to maintain, but that HTML5.0 semantics are much better to maintain than old HTML –343.000.33! One ever-lasting example: tables. To add a new column to a table, you need to use your favourite web-development tool with visual aid to add it, and merge columns on all the other rows. In an unordered list or definition list, the change is local.
My reason behind using semantic meaningful HTML is;
Mixtures are prohibited
I embrace separation, mixing layers is toxic. What I mean is separation of logical layers of a web project. It used to be really hard in 1995, but now if you don’t create separation early on, no one is going to cry with you later, when you stay up all night changing labels from “American English” to “Australian English.”
There is the deep back end layer called data layer. Only real data reside there, data that are either entered by a human being (not a machine, nor you, the geek!), or gibberish entered by the system, only the system understands. I have yet to see a fully separated database layer. This problem rises more evidently when dealing with multi-lingual sites. Open source platforms got it right. They implement translation labels way higher than data layer, and the interface drives directly from that translation layer. So you’re database either has “pages” table, with “title” entered by users creating them, or a look-up table of intTransitOxIdLabel. Where it gets its meaning? business, or interface layer.
Then comes the layer of business logic. Open connections, maintain connections, take orders, process orders, serve back. No real decisions to be made in business layer. The system is the only actor inside that layer. It never ever decides whether the content is “Uppercase or lowercase.” It never decides whether time logged is 12 or 24 format, or in what time-zone. It never makes a guess on whether the information is valid, or not. Ever! We have always called it “business logic!” but really, it’s as dumb as it can get. A junior soldier. Takes commands, serves commands.
Presentation
The Interface layer is made of multiple sectors, I know more about that because that’s where I live. The behind the scenes UI layer is where all logic and intelligence lie. Things like: “did you mean tomatoes?” or “Go fish! you have no access” are taken care of in that layer. But outputting them to the real human being outside is served through another “Etiquette layer” to make sure our geek is not misunderstood. This Etiquette layer makes sure it outputs “Sorry, you have no access. Our admin guessed you might like fishing, so we recommend couple of days on the shore of the Deadsea.”
Our translation layer serves pure language, no formatting, no logic. Sometimes though you do need your strings to look smart, like “Go fish! Mr Norris!” In this case, replacement strings come into the rescue. “Go fish! {0}!”
Thus, all textual labels exist i this translation layer (better called resources in .NET projects), and next time you deploy across the ocean, you have one folder to work with, and maybe even one file. Separation is king.
The last layer is the graphic interface layer, where HTML, CSS and images reside. But there is one layer that connects the graphical to the logical UI layer, it is the behavioural layer, consisting of HTML, and Javascript. There are yet two kinds of Javascript we are facing more often, interface-related, and business related.
If i start talking about specifics I might never finish, so I’ll speak cryptic and shorten my words.
Command your interface layer, each object should know the following about itself:
- There is how I look. E.g. I look with a red asterisk in my upper right corner
- How I react: I blush when commanded and speak a word or two
- Who commands me: my self, sibling or parent
- What is the command I get: “react” when I don’t have 8 characters, and say: Invalid password format.
Things that are also implemented but I do not have to be aware of:
- Who triggers my commander: a button at the bottom.
- What is expected of my commander, a signal to go forward or halt.
So your password input field (singular) looks something like this
<input class="w8 spaced redstar" type="password" data-behavior="ValidatePasswordFormat" data-speakout="Invalid format" data-validateme="true" /> <button class="btn" data-behavior="IssueCommandsOnClick">Validate</button>
Here, the commander is the same as the field itself, it’s taking care of itself. Next is when you have a parent to decide what commands to initiate:
<div class="breath" data-behavior="ValidateMatchPassword" data-speakout="They do not match" data-validateme="true"> <input class="w8 spaced redstar" type="password" data-behavior="ValidatePasswordFormat" data-speakout="Invalid format" data-validateme="false" /> <input class="w8 spaced redstar" type="password" data-validateme="false" /> </div> <button class="btn blue forceblock" data-behavior="IssueCommandsOnClick">Validate</button>
So now that a parent exists, there is no need for the child to take care of command issuing, actually its a fatal mistake to make it do so.
The trigger fires a command-issue event for all parents (with data-validateme = true), which in turn run their own behaviour “ValidateMatchPassword” which in turn may or may not fire individual behaviours like “ValidatePasswordFormat,” and do extra few things like match the two fields, and “react” itself on this event… the reaction could be similar to that of its children or completely different. In this case, the parent is also an object that gets its commands to react by its sibling or “itself.”
In code, this will translate into a plugin to define the reaction no matter who or what triggers it, this is the interface-related Javascript layer , a higher level layer to define certain template for repetitive behaviours (like required fields and certain formats), and define the behaviour of the button command-issuer, then a final high level layer specific to the page itself, where it reacts for specific event. This is the business-related part of the Javascript layer.
Often mistakes
Some of the ever lasting mistakes that I recover from (sometimes with a price to pay) are; using a style defined in global stylesheet to define looks in my Javascript to define behaviour. I corner myself into making a nice looking blue pen sign dates, when I later I need to make blue pens that simply do write names.
Also, making a JQuery plugin handle a bit more than what it’s supposed to handle, like “blush, when you’re empty.” But blushing is a reaction, being empty is a condition.
Abstraction
It might sound self-evident, but mixing layers, making children aware of their parents, or lower ranks talk directly to higher ranks, is not easy to avoid. JQuery plugins are very low level (logically), so they are not supposed to be aware of user choices on higher level interface layers. It would be a killer to do something like this inside a JQuery plugin: $(“.myselector”)!
Another necessity of abstraction in UI-related Javascript, using something like “next()” corners designers into using the expected HTML syntax. Fortunately, I found abstracting JQeury plugins ands UI Javascript much easier than being specific.
Naming
Finally, naming mistakes. Especially in stylesheet selectors. Abstracting means defning a style according to what … well, style! “.myRedBoxBordered” can be used a million times without having nightmares, “.PasswordArea” cannot be used again on “Cart login area.” Even though the designer meant to use the same style. You can box CSS definitions easily to create packages, like “.Redbox” or “.ShineyGreyPanel” which defines more than just color.
So I’ll just wrap it up and say: mixing is toxic, separation is king!
Saturday, March 31, 2012
Oops! You found me again.
What 404 pages should and should not be
In Boiler Room | trackback | Tweet | Share on FacebookI once read a post on Smashing Magazine about 404 Error pages, and here is my take on what 404 pages should and should not be.
State clearly that it is a “404″
Yes, the internet audience for some vague historical reason understand what a 404 page is.
Clear “Page not found” title
… because not all of them do recognize the 404. It comes down to the type of audience you are trying to serve. Twitter’s audience may all know what a 404, 200, 500, 666 error is (what’s 666?!). But the Canadian embassy in Sydney cannot rely on that.
Space, lots of it
This page has to have unusual white space around the content or header. Unusual is 50px more than regular space. It has to be identified as an “unusual” page, because it is certainly unusual to land on a 404.
Visually clean
I do not like those 404 pages that look like any other page on the system. Removing the navigation and providing other ways to navigate is certainly safer than putting the same navigation bar in place. Users need to know it is out of the norm that they landed on this page, so that they try to do something about it.
Not too many exit points
It is confusing to get to a 404 after clicking on a link of the myriad of links you have on your site, it is more confusing to have to correct your own path! So don’t ask the users to make more decisions than what they have to.
Sometimes it is possible to identify the source of the 404, for example; a link to a product, in this case you can lead the user back to “products list.” But most of the time, 404 errors are generated by external traffic leading to your site, to pages you removed all together. It is not easy to guess the intentions of the users. The safest thing to do, is give them a welcome back to the main door.
Contact form
You can have tracking code in place to find out about your 404 errors. [Useful read: Optimizing Error Pages: Creating Opportunities Out Of Mistakes]. But a contact form for those who really want that piece of content back, would give you a priority scale to identify which link to fix first. Remember, sometimes, robots find your missing pages, which is something you shouldn’t be too bothered about, but you need to filter against, not to end up with too many error reports.
Saturday, June 16, 2007
Assbook
What About Facebook?
In Boiler Room | trackback | Tweet | Share on Facebook
I get a lot of “I love facebook’s interface, so clean and white, and easy to use.” They get a lot of “Are you serious? Facebook is the lousiest highly-rated community Web.2 site I had to deal with.” It is highly-rated, and it is very successful, but compared to its peers, the interface is just one hell of a pain in the ass!
Captch a Captcha:
If you have been regularly using Facebook, you would note their CAPTCHA is not loading correctly half the time. Rather than refreshing the page as advised in a small tip beneath it, right-click on image, and choose “Show Image…” as many times as it takes to load the CAPTCHA image. Recently, however, I noted that the Captcha has disappeared. [It could be a smart application that tracks users and trusts them after a number of successful transactions.]
Dragging Around
The “Add to Friends” link does not appear in the page that lists friends of a specific user, dragging you to another page in order to add him or her. What a drag!
Another scenario is the lack of merge accounts feature. Getting an invitation on a different email account than the one registered, leaves you dumbfounded and completely crippled!
Streets have no names!
I confess, I almost gave up shorty after I registered. The networks are regional in Facebook, but they don’t give you any hints! I was frustrated trying to “browse” available networks instead of being forced to join “Jordan!” Turned out, nothing to browse, this was it!
The Wall-to-Wall mechanism has no signs. You have to figure it out yourself, or somebody must tell you.
Guts!
Pressing “Enter” to search rather than clicking “Go” is courageous. I love it! The Advanced search , though useless, is buried in a drop down menu. Unfortunately, you cannot search by almost anything of relevance.
Defining somebody as “Is my sibling” in the relationship matrix, and displaying it as “You are somebody’s sister” is an example of smart behaviors. Though lazy. The active solution would be to display “Is my sister” right in the matrix. Problem is that it took me time to realize it, I was searching for “sister” in the matrix, completely ignored “sibling.”
Lost
It is quite strange how things get lost easily in Facebook. Partly because of a policy not to report back rejections, the list of requests you made cannot be retrieved. You also do not get notified of new activities in groups, probably to shift your focus towards walls, and discourage groups.
Blindness
The purpose of Facebook is to allow people to get in touch with those they lost contact with during years of separation. The privacy issue is tricky, turning it so high defeats that purpose, disabling it jeopardizes some clients. It goes down to people. If you want old friends to get in touch only if they mean it, publish your profile.
When you write on a friend’s wall, the comment box is within context of the same page. But when writing on a group’s wall, it detaches from the main screen, putting you out of context, completely blinded. I wonder why they don’t Ajax it as well! [It may be the Captcha, that doesn't work, and that stops appearing after a while! Way to go, Facebook!]
There is one scenario that exposes people with privacy setting turned high. If you comment on a picture of one of your private friends, their whole album gets exposed! HORRAAAY!
Blindness strikes again in the Walls mechanism. The full conversation shows in the Wall-to-Wall screen only if both parties are friends or public. That leaves much of a broken conversation, and guess whose half you get to read? Correct! The other one’s rather than your friend’s! Crap!
Spam
Too bad, spammers found their way to Facebook!
Who knows? It’s better this way, you get bogged down, and switch away from Facebook to Assbook, to do something more useful.
Thursday, May 31, 2007
Sunscreen
The Ten Commandments to Cure UI-Virus
In Boiler Room | trackback | Tweet | Share on Facebook
Before I started working on user interface problems, I used to be a developer, plain and simple. As many of the developers around the world, I was suffering from the UIV (User Interface Virus) (credits of naming: esense software).
The disease:
The UI-Virus infects those who spend too much time looking at the code behind, attempts to clean up the code with right indentations increases the chances of getting infected. If you suffer from any of the following symptoms, get help!
You measure high efficiency by how many hours you spend creating a new feature.
Your understanding of high performance is the number of system clocks it takes the database to release information for the maximum number of users.
Your text boxes are all of the same size!
If you are a .NET developer, you love Datagrids. If you are otherwise, you list data in a datagrid format!
Your button captions are always: Submit..
You have no sense of urgency towards Fieldsets.
Your validation schemes run on server-side.
You take pride in developing pages in the least time, and highest consistency. Which follows…
Your understanding of consistency is bound to how identical the pages of an application are.
List, View, Add, Edit, Delete, sisters of war, sounds familiar?
For a “yes, no” option list, you use SELECT drop down menu.
The results of the Disease
The following may occur after being infected.
you can’t stop looking at your very nice HTML code.
You enjoy the number of colors used in the interface.
Half the words on the interface are mistaken to be links!
BoldItalicUnderlined words don’t affect you.
You end up with a stylesheet per page.
You lose the sense of PADDINGS and MARGINS.
All your pages look the same.
HELP!
The medicine is here, following are the ten commandments of UI, print them, hang them, and ya’ll just be fine!
1. THOU SHALL NOT DEPRECIATE
Don’t add a title to an area if the area is self-explanatory, it is like showing someone a stick and telling him: this is a stick! I know! Just hand me the stick! DON’T UNDER ESTIMATE USER INTELLIGENT. People learn fast, and get into habits of use. Make it an enjoyable experience. Sharpen the learning curve, the behavior you are implementing does not have to be standard, but you must stick to it through out the application.
2. THOU SHALL NOT DIVERGE
Example: For the desktop application, use the default windows theme for buttons, they look great all ways. Follow standards for as long as it takes you before you commit divergence.
3. THOU SHALL NOT DECEIVE
A button that says “continue” does not “save”, a button that says “save and continue” does. A button that says “Add People(…)” takes you some place to add people, a button that says “Add People” adds on the spot.
4. THOU SHALL NOT NAG
Don’t repeat links on the same page, don’t repeat words, don’t ask many times, don’t shout, don’t go into much details, and over-explain your mistakes… (example: field label: countries, drop down first option: select COUNTRY! What else would I be selecting?! Solution, first option is “–“) (another example: error messages should be compact, straight and polite) (yet another example, don’t bold-italic-underline a single word!)
5. THOU SHALL KILL!
IMPORTANT: DO NOT LET TECHNICAL ISSUES (Studio.NET, Content Management Free portals, WordPress Engine…) STOP YOU FROM MAKING KILLER INTERFACES
6. THOU SHALL RESPECT THY SHEETS
Want to apply style? Consult your CSS. Want a new style? Consult your designer. Never create a new class or add inline styles just to bring your page into style, you will break consistency, and one day you will regret it.
7. THOU SHALL HONER THY BROWSER
Honor the browser as given to you, use its capabilities and don’t enforce gimmicks against its limitations, try not to resolve its shortcomings, next version of the browser will resolve itself. The web is not a desktop application, the browser is, and it belongs to the end user, not to your server. (Example, cherish the browser’s scrollbar, respect the back button, avoid popups. Form inputs of type “file” cannot be set by code; accept this!)
8. THOU SHALL NOT NEGLECT BILL son of GATES of UPPER LAND of MICROSOFT
Firefox is coming fast, explore, but don’t ignore IE.
9. THOU SHALL NOT BRAG
Don’t brag about your features by making a link to every little thingy on your site, like sub navigation and sub SUB navigation! Take the user inside to carry out what they want, not what your PM wants. Respect user privacy, give alerts then move on. Remember, initially, your user hates your guts, don’t give him a reason to dump you. Roses are red, links are blue, or green, or fooshi… all links, not just those you wish them to be.
(this went to esense in the original script!)
10. USE SHARESENSE!
If you can’t, use sunscreen! God knows I hate them both!
Tuesday, May 8, 2007
Dead Gems Don’t Die
Interface Comparison between Sony Ericsson and Siemens
In Boiler Room | trackback | Tweet | Share on FacebookInterface design has been my area of work for a while; it kind of crept into my life somehow. I always look for pros and cons in different interfaces. The flashers button inside the car, the food cans and tea cartons, the elevator’s keypad, and even the toilet flush handle. Today, I will just stick to mobile usability. In the red corner sits Sony Ericsson W550i (as Sony), and the blue corner lies (dead) Siemens S55 (as Siemens).
You’ve got SMS
A dismissible prompt appears on Siemens upon message receipt. The left function button automatically becomes a shortcut to the dismissed message. Sony raises your fears of ever dismissing an incoming message, not even by accident, by making the shortcut towards the inbox more clicks away than the long cut! Don’t ever dismiss a message!
The prompt on Siemens allows you to instantly delete the message without reading it. On Sony, you must go the whole nine yards to do that!
When sending to a group, Siemens allows you to expand the group and uncheck recipients you want to exclude, whereas sending to a group according to Sony, ends there!
Deleting a message on Siemens automatically shows the next. Heaven on earth!
When sending a message, Sony always displays a short list of the most recent contacts. Handy!
Life is ten folds easier because of one option
Picture this scenario: you get a message from someone you do not know, he introduces himself, and asks for a friend’s number.
Sony’s playground: In simple words, you must either copy your friend’s number and paste it as you reply to mister anonymous, or save the anonymous number as a new contact, and send your friend’s number Via SMS to this new contact. Here is an exaggeration to portray the number of clicks and buttons pressed:
Leave the message context, find your friend’s number, from the options menu choose edit, scroll to highlight the number, click to edit, from options menu choose Copy All. Re-open the message you just received (hell lot of clicks), from options menu choose edit, then Paste. Send. The other painful way is to save the number of the new contact (another hell lot of clicks), find your friend’s number, from options menu choose Send Via, then SMS, select the new number you just created from the list, then Send.
Siemens paradise: While still within message context, from options menu choose Insert From, find your friend’s number, click to choose. Key in few love words, then Send! Life is ten folds easier because of one option: Insert From.
Organizer
Not only it doesn’t support recurring events, Sony also belittles its users by offering “default alarm, and recurring alarm.” Alarms are supposed to be recurring! If I want a non recurring alarm I would create a task and set a reminder!
A random key press on Siemens mobile turns off the alarm
A random key press on Siemens mobile turns off the alarm, while it takes two predefined key presses on Sony mobile. Any mistake, it will automatically snooze. Half asleep; I many times missed the alarm because of the ease of shutting it off on Siemens. But after using both, the incidents of missing an alarm were less than snoozing by mistake.
Ring Tones
Assigning a ring tone per individual versus a whole group is debatable. It depends on the kind of contacts you have on your list. If they are all friends and neighbors, you want the Sony way; a ring tone per contact. I would vote to have both services. The winner of this category, however, is Siemens, for providing a ring tone for “unlisted contacts.”
Keypad
The buttons on Sony work in a way that you do not have to flip-open the set. There is a distinctive Delete button that allows you to delete items on the go. Winner! Unfortunately, there is no distinctive Cancel button, so canceling an incoming call is actually a function button. The “OK” middle button is deceiving, I wouldn’t count on it.
no distinctive Cancel button is inefficient
Siemens has two distinctive call buttons, a red one for cancelling calls, and a green one for receiving calls. Siemens does not have to show a Cancel action because it is the same as the red button. Winner!
There is one scenario on Sony that reflects the inefficiency of having a separate Cancel action. When within the context of internet connection the right function button displays Cancel, while the back button on the left is inactive. How convenient for service providers!
Shortcuts
On both mobiles, most of the “press and hold” buttons are predefined, and navigation buttons are programmable. The keypad, however, is programmable on Siemens, and preserved for speed-dial on Sony. Sony on the other hand has a separate shortcut list that is easy to reach. Unfortunately, it may grow so large the shortcut is no longer short.
Adding a contact on Sony is my worst nightmare
Pressing and holding the (# or *) key enters the silent mode on both, flipping-open the set to reach it on Sony makes it a loser.
Make My Life Easier
Sony provides a “type” for different numbers of the same contact (mobile, home, work…), but you cannot use the same type twice.
Adding a contact on Sony is my worst nightmare. After entering a number and leaving the context, it is only human to assume the number is saved, I always make the mistake and hit the back button, which prompts me with a long message, and I automatically hit the back button again. It turned out that the long message was: ‘Changes have been made, Save before Exit?’ Rinse, wash, repeat! Ghrrr!
Sony retrieves your last used T9 preference
Language setting is a tie. Sony retrieves your last used T9 preference, while Siemens always resets to the saved preference. But Siemens never switches on T9 in “contact name” context, Sony annoyingly does. Who looks up people’s names from the dictionary? In email and website context, Sony switches off T9, and deactivates it completely! Why!
Engineering
Power-saving mode on Sony means a totally switched off screen, which is more powerful than the pitch black screen on Siemens.
The mechanical lock on Sony is by far the best technique I have yet to experience. It is handier and serves the purpose. Siemens lock was by means of pressing and holding the star key. Nokia’s way of locking is the dumbest way on earth! It is so complicated I never got the hang of it.
The mechanical lock on Sony is by far the best technique I have yet to experience.
The Radio buttons on Sony are direct and they work within screensaver context. The only problem (with the W550i) is that you need to have the handsfree all the time to make use of it.
Disabling start-up greeting sounds shrinks it down to an annoying single keynote and a short vibration on Sony. Reaching the password screen takes so long I had to disable it!
Siemens Gem
Read this carefully: The interface of the message has two functions at the bottom, Reply and Options. Scrolling down to the bottom (there is always a scroll down even if the message is one line), the functions change automatically to Delete and Next!
I want to see that again!
Side note:
Siemens mobiles recently sold out to BenQ mobiles, after a failure in the merger, and Siemens Networks merged with Nokia. On the other hand, Siemens acquired Fujitsu personal computers, and already has the largest engineering firm in Europe. Siemens is based in Germany. Sony is based in Tokyo, and had merged with Ericsson which is based in Sweden in 2001 on the level of mobile communication. Sony Ericsson is based in London. Hmmm, you know what they say about too many cooks!
Saturday, April 7, 2007
4,…,2,1, Action
Comparison between One TV and MBC
In Boiler Room | trackback | Tweet | Share on Facebook
TV broadcasting has gone a long way since shut-up-and-watch single-sided earth channels, when ugly news broadcasters frowned during news, then put on a fake smile to announce the “next on TV” program. Those were the days when all channels were called “TV.” With the skies being crowded with image transmitters, fighting over the earthly crowds is becoming less of luxury and more of business survival.
Since competition arrived, TV stations were becoming better. Until recently above the skies of Amman, there has only been one dominant, MBC group. Thinking it can never get any better, comes along the little brat: One TV (AKA Dubai One). The competition is at heat, and here is a comparison.
Beauty versus ugliness
One’s orange was striking so hard it casted MBC channel 4 as ugly, dumb, and character-less. MBC started putting efforts ever since, to blow life in an abandoned body, only to shock us of how different things were now that there was competition. The logo of One TV was so unique and full of character, it left MBC staggering for a breath of life with their dull “channel 4″ stamp. But they were smart. Turning the slogan into a character – It’s for you!- they got off with the vocal identity, and putting cloths over the “4″ they bashed the visual identity.
The logo of One TV was so unique and full of character, it left MBC staggering for a breath of life with their dull “channel 4″ stamp.
The patterns of One TV were simply unbeatable, or that was what we thought. Using their “comma” based logo, they turned every break announcement into adorable and interesting shapes and plays, that you must have a favorite regardless of your preferences. Channel 4 came round fast and started making their own patterns, shaping and playing with the 4, producing beauty. Now that One changed their self promo into some hideous, gruesome, aimless, dull and ridiculous human-involved plays, Channel 4 has won this battle. Hideous human-based stupidity did not escape Channel 4 though, was it me or did you see how big of a mouth the yoga girl had? Ugly!
MBC Action, however, is an exception. They started out with the power of Yellow, and stayed on top of it. (MBC Action Premiere on YouTube.)
On the level of displaying promotions for general programs, I gotta say, MBC looks like an amateur with a paint bucket and a white sheet. I cannot help but sing along the “daa dadadada daaa…” of One’s 3-movies-a-night promo! (Next time you’re watching, pay attention. Awesome!) But One not only took care of every sketch they played, but recently they started dressing soon-to-show movies and series with a whole new outfit. (As an example, see the Lethal Weapon and Sopranos promotional.) MBC group is way behind. Their sketches are “cut and paste like shit!”
See Sopranos Promotional on YouTube.
Useful versus inept
Announcing a soon-coming movie on One TV is much smarter than the “burn it all” approach of MBC channels. The earlier method was also strong: displaying a single seen that shows major stars, and silently announcing the soon coming movie. Recently One TV started playing around with it graphically pushing MBC way back.
The female voice on MBC is not adequate to announce “Alias” or “Law and Order!”
The vocals on One TV is much subtler and more powerful, both the male and female voices. Personally I think the female voice on MBC is not adequate to announce “Alias” or “Law and Order!” It’s just good for “girls movie night.” The male voice does not speak Arabic very well, or so it sounds!
Rolling down the programs of the day although graphically outcasts MBC, yet it is very useless and does not serve the purpose, so I would vote for MBC program roller, especially that on MBC Action. One’s method is a bit forced.
Labeling with “showing now,” “next,” and “later,” One TV came first, MBC 4 picked up fast afterwards, and they did a good job. One TV used to display all three labels in one shot, now in three shots, I would vote for the former because it is more practical. One TV learns fast; they pushed these labels from lower corner to upper left corner to avoid overlapping with textual and subtitle labels. MBC still annoyingly display them above the subtitle.
MBC’s edge is “tomorrow same time” label
Announcing a “Don’t Miss” label is One’s edge, although the date and time displayed are hard to read. MBC’s edge is “tomorrow same time” label which I believe is one of the greatest advantages of MBC.
Displaying two time zones for every program is a failure on both channels. I believe they should always announce with a single reference, which aught to be KSA time, and if they can’t do it, follow in the steps of the greatest channel in history: BBC. They announce their upcoming programs with a relative time: In three hours, in forty five minutes…etc. Smart!
MBC made use of the “guide” button on satellite remotes perfectly well. One TV are still behind. Finally, coming back after break is announced with a useless ugly screen on Channel 2 because they did not deploy labels.
Audience selection
MBC group consists of the regular MBC, Channel 2, Channel 3, Channel 4, Action and Al Arabiah. The most famous are 2, 4 and Action. Realizing the mistake they did by dubbing the channel as “One TV,” they soon changed the name to “Dubai One” to connect it to Dubai TV, Dubai Sports channel, and Sema Dubai. None of these channels are as famous as One.
Displaying two time zones for every program is a failure on both channels.
While Dubai channels are more versatile and cover more interests, MBC channels heavily focus on one audience: young adults. Three of the group’s channels are dedicated to western movies and programs. The newly added MBC Action was a very smart move on their part.
I don’t know if it’s arrogance, clumsiness or plain stupidity on MBC’s part, but showing CBS the Early Show and America’s weather forecast is drug dealing! (Read Copycat Weather Forecast.) Dubai already jumped them with their English news bulletin for UAE residents. Both channels, however, try to force in values of the western world into our oriental innocence with their fashion shows, Inside Edition and Insider, or US-oriented talk shows like the View, Oprah, and Dr schizo-Phil!
Both ends of Boston can describe pretty much the genre of movies and series on both channels; Boston Public on MBC versus Boston Legal on One TV. Put the following on the right channel that shows them: Charmed, X-files, Joe Billionaire, ER, the OC, One Tree Hill, Lethal Weapon I, CSI, Cold Case, and Gilmore Girls. Okay, I’m not always right, but that’s the general feeling.
Broadcasting Rights
Competition is very obvious in terms of syndication, buying shows is not enough any more, it is “rights to show above the Arab region” that they are after. When One TV gets the Oscars, MBC gets the Night After the Oscars! (Like anyone would care!) One TV gained rights for showing Desperate House Wives, while MBC enjoyed Grey’s Anatomy, Lost and Prison Break. And… the hell I care! 
Personally, I just enjoy the art of One TV and make sure never to miss a CSI episode.
Saturday, March 17, 2007
Crap: what sets it apart
Break down of Dove's Evolution
In Boiler Room | trackback | Tweet | Share on FacebookThe industry of advertising and promotion is such an exciting and overwhelming industry, you tend to have a favorite commercial even with the abundance of crap material. We must have been created with the ability to promote as much as deceive. Today, I am breaking down a single ad of my favorites played recently on TV, and try to figure out why it is so successful, and what sets it apart from the rest of crap.
Evolution
If you watch MBC channels or ONE TV on a regular basis (in other words, if you live in Amman), then you probably watched this new Dove spot – Evolution. Driving any more attention to this silly industry of beauty-making is not within my intentions, but this spot is one of the best commercials I have ever seen on TV (next to Hummer Little Monster).
The entrance of the ad is a bit dull; you almost always miss it, especially if this is the first commercial played in a break. It grabs attention when it starts to play faster. I would not be surprised if you have missed the whole ad first time it played. It is towards the end when you make a subconscious decision to pay attention earlier, next time. It took me three times! I personally do not think this is a failure on their part, but a massive success, because they made me stick to commercial break instead of switching away through my favorite’s list.
With the many little details to watch, there is always something new to catch. Fast forwarding instead of playing short clips adds a lot of anticipation, and sends your sub conscience to work.
Human nature in trying to absorb change compels us to watch carefully every time, with a childish effort to copy the first image in mind and try to recall it at the end of the commercial to see the difference. Of course, YouTube spoils all the fun.
The message displayed at the end (in the original ad played maybe six months ago) is: No wonder our perception of beauty is so distorted. The UAE-specific ad displays: Why is our perception of beauty so distorted? I personally find the former more powerful.
The choice of musical effects is a piece of art. It starts as the sound of tools around, and ends as a regular beat. Finally, it dies out in an artificial manner serving the purpose of the message at last.
The internet website of the campaign; the hell I care!
Driving Forces
From an industrial point of view, that commercial was a success. The idea behind it is really simple; the implementation, however, is humongous efforts. This brings me to the question; does a great idea with little money make a greater ad than a fair idea does with lots of money? My personal humble opinion is that a fair idea with lots of money makes a very lousy ad. Money tempts artists into taking extreme measures to make their ad more techy. It ends up like a sandwich of Twix and Mlookhieh! Hey, if you can afford both, why not?
Dove ad was definitely sitting on a great idea; simple and straight forward. Money however, made it happen. It could have been produced with less money but less impressive it would have come out.
Timing
The time the spot is played is so crucial to its effectiveness; this part below is my own judgement.
When you are watching suspense, action, drama, comedy, crime, or horror show (as opposed to Oprah and Dr Twisted Phil!); the worst time to play a short commercial would be right after the break is announced. Racing towards the remote control as soon as the break is announced (like I do), makes you think I am wrong, since that would be probably the only commercial you would see. But the truth is not so. Your brain would still be hanging on the last scene that you would not be aware commercial break has started. By the time you realize it, the spot is over, and you got your hands on the remote control.
If, however, you decide to fix a cup of coffee in between, the second spot is the luckiest.
The Dove commercial works because the middle is more intriguing than the beginning, and the end is very attractive. The ad is long enough it waits for your brain power to come out of suspension. Unfortunately, if it comes second, you would be long gone.
A commercial played fifth, or seventh has better options, because it can catch you while switching back and forth between channels waiting for your show to come back from commercials. If played for the first time, it can easily trick you into tuning in, unless it’s a new Soap ad (kollo 3ind el 3arab saboon).
TV broadcasters usually play a small segment in between the commercials to announce soon-to-come-back from commercials. If you mistaken those segments to be real come-backs, they might just catch you with another ad! This time, your brain power is fully functioning, and you are too tired to switch away.
In conclusion, the best time to play a spot is within the same segment a great spot like Dove’s is meant to be played! You would not risk switching away hoping to catch a new scene of your favorite ad. Life sucks!
Intentions
It is a pity that this great ad is meant to divulge and distort the perception of beauty even further! We are far too experienced with the beauty business to fall for this one. I don’t think that Dove wants women to feel good about how they look already; they wouldn’t need Dove for that! The idea is to make them purchase their products to make them –supposedly, more beautiful. Otherwise, what’s the point?
I personally never memorize the name of the shampoo I use! I just pick the right color of package, which has the word SHAMPOO bigger than the trade name.
“ma kolhom zay ba3ad ya mama!” “They are all the same mama!” This was a line in a Dittol spot back in the days. That probably was the only true statement every spoken on television. It just amazes me, what were they thinking when they let that ad pass? But then it came down to me: has it not been for that “truth-telling” line, nobody would have ever paid attention to the ad. In any case, I don’t believe Dittol were that smart, they were lucky rookies!
Evolution was produced by Ogilvy and Mather – Toronto. Creative director: Janet Kestin, art director: Tim Piper.
Thursday, March 8, 2007
Shshsh, Shut The Shutters and Shit!
I mean SIT!
In Boiler Room | trackback | Tweet | Share on FacebookAbout time! wouldn’t you think? My last post was in August of last year, after which I was growing sick of my old interface, for many reasons. Here is why I have jumped to a new design.
Two years past since I dubbed myself as SHUT on MSN Messenger. SHUT THEORY blog was on the back of my mind ever since. The last design was based on elmota, although I had a shutters area (sort of my guilty little me!), I was never able to switch completely to this favorite name of mine. I had great time and much fun experiencing the name SHUT on everyone I know. Today, after two years of exposing it, the name is so seamless amongst those who know me. Those who did not like the name at first, seem to be getting acquainted to it much faster than others!
Truth is, I had a secret agenda. Naming and Branding was a favorite topic of mine back then, and I wanted to experiment the dimensions of a good name. At first, I had feedback from “that is lame” to “that sounds like Shit!” – how do you argue with that?! However, sounding like shit was not bad at all! As a matter of fact, I think some liked the idea more than they were willing to admit. Nowadays, the name has grown to be accepted between those who know it, and they rarely address the idea behind SHUT. It is kind of like GUESS, and GAP, or even APPLE. It just grows onto you.
Layout Justifications
I know that laying out the web as a newspaper has no excuse, but my only justification is, this is my blog, so blog off! Thing is, I have this thing for editorials and print magazines. I love laying out articles to fit in columns, and for the love of it, I decided to make my blog a bit out of the “web-ordinary.”
I do not encourage this kind of behavior! It is not easy to read long columns across the height of the screen. But on the other hand, it is much faster to read short columns if the height never exceeds the height of the displayed area. First, you do not have to scroll down. Second, you get to use the whole width of the ever-horizontal monitor. Third, reading off short columns has proven to be faster.
Technically Speaking
I downloaded WordPress engine and activated it on my host. And uploaded all my previous blogs to it. It wasn’t such a bad experience given that WordPress is an Open Source project, with “Open Source” type of documentation. The one thing that
was horrible to me was breaking the infamous LOOP. I also faced issues with the administration part. For some reason, their Rich Text editor was … well… how do I put this… Dumb! I had to remove it, then I had to disable their “applyfilters” function on my HTML, so that my HTML stays intact.
I also changed the administrator’s manage screen to display 30 posts (instead of the ugly 15 paged posts) and to include the excerpts. I am looking for new ways to be able to change the category with a single shot.
Now for those of you wondering about the sub title of each blog title, I used the excerpt field, and boy do I love myself for doing that?!
The toughest part about the design was the column-based layout. And this is how I cracked it down (don’t laugh):
- I write the post on Dreamweaver in a single column.
- Open the file in Firefox, and with JavaScript, re-render it using CSS3 Mozilla-supported feature: column-count.
- When I am satisfied with the number of columns to display my article, I go back to Dreamweaver and re-write according to the new layout.
- Then again Firefox comes to help, I open the file, extract the HTML to a textarea, copy, and paste in WordPress. (IE extracts very ugly HTML).
- I drink a pot of tea.
As for graphics, I print screen, take it back to Photoshop, cut the pieces I want, apply on my original background image (in correct position), apply my filters (yup, I too, have filters), crop and save. That is to make them blend in the background.
And of course, ClearType!
My hopes are towards the archive page, I hope I can script the page so that it lays out the articles next to each other, eliminating gaps, just like in a newspaper!
Feedback
I sure do hope to hear your comments on this one. I have committed a crime against designers, I increased the size of font to 12px! That should make a lot of people happy! I also appreciate reporting me with bad links or dead images. Please email me at broken@elmota.com with any broken links.
Sunday, May 21, 2006
Way Up
Most useful websites
In Boiler Room | trackback | Tweet | Share on Facebook
Been browsing for God knows how long, and came down to a list of everyday visited websites. These next sites are my best in terms of “use,” not “looks.” As a designer, developer and an advertiser, I tend to look for websites within these areas of interest. Mind you some of them do look pretty. I usually turn to these websites when I am about to start a new design project, whether that be a print project or a web project. It is my way up to the level I hope I can reach some day.
Design Archives
stylegala.com
Greatest designs compatible with CSS standards. Also see Website Design Awards, Web2.0 Awards, and Web Design Book.
aiga.org
AIGA is one of the biggest design agencies, good place to follow up with the design world. Also see: Communication Arts, and How Design.
designarchives.aiga.org
AIGA design archive is so rich, you can never have enough of it.
Stocks
dafont.com
Huge database of fonts, some freeware, and some shareware
famfamfam.com
Free icons, everywhere!
gettyimages.com
The best stock images database, and the largest by far. Make sure to go into the creative section.
veer.com
The second best stock images database. It has a wonderful marketing technique. Not so huge though. Check out their Ideas section
istockphoto.com
Very cheap royalty free images. 1, 3, and 5 Dollars per photo. Illustrations and Flash are available. Also check Dreamstime, and Fotlia.
photocase.com
FREE stock images. You get three credits per day to download amazing Royalty Free images.
Advertisements
ihaveanidea.org
Advertisements only. A huge archive of ADs where you can also rate. Plus articles and AD events.
Search
google.com
Hey, what can I say!
Listings
flickr.com
Really good, where you can upload and share your images, in a very nice, friendly, and intriguing way.
technorati.com
You can call this a Blog Search Engine. It lists the latest and hottest blog entries.
youtube.com
Video clips uploaded and shared, you can find almost anything moving here!
odeo.com
Lists of Audio Clips, shared and uploaded for free. I love the name of this website.
ma.gnolia.com
This is something new! Lists of favorites! HUH? You must check out, it is interesting
Very Useful
usingenglish.com
Ever lost a phrasal verb in your human database? Get it back here.
m-w.com
The original online dictionary
msdn.microsoft.com
/library I do not think there is anything as good as the MSDN library. Not even chocklate!
wiki.ehow.com
A databs eof how-tos, about everything, and you can edit as well (just like wikipedia).
basecamphq.com
Browse the website, make a free account, and control your tasks, projects, events, team members, and more.
no-spec.com/
Designers fighting Spec Work, to protect their efforts and work.