2009年11月5日 星期四

「找人」真是易紅題材?兩樁只靠普通的YouTube及Facebook操作就傳遍網路的找人案例

最近一星期,網路上傳出兩則「找人」事件,得到不少的迴響,我覺得值得再細看一下。

第一則找人事件,其實是一場悲劇起頭的「找人事件」。這其實是一則「尋人影片」,放在YouTube上面,找一位叫Madeleine McCann的英國小女孩,2007年期間女孩全家來到葡萄牙度假,眼睜睜看到小女孩被不明人士綁走,現在已經三年多了,小女孩如果活著的話,也已經六歲了。

這則影片重要的是,它或許並不是第一則拍片上網希望網友幫忙協尋的請求,但是應該是第一則由「政府」拍片PO上網請全球網友幫忙找人的嘗試,這個英國政府單位叫Child Exploitation and Online Protection Centre,簡稱為CEOP,就在影片的左上角。各位知道各國各級政府單位發出最多的傳單之一就是「找人」,無論是找通輯犯還是找失蹤人口都是在「找人」,但發傳單的方式,或許在沒有出境的情況下是有效的,但若要對全球呢?大概就只有YouTube影片幫得上忙了!這則影片之後,會不會各國的警察也開始倣效,開始大量的貼出「找人影片」,讓YouTube多了一大塊的新勢力,也讓某種新的找人影片平台有了機會?

拍一部YouTube影片來找失蹤人口,尤其是像這位可憐的四歲英國小女孩,其實是很有意思的做法。看,每年有這麼多失蹤的小孩,各國警察不可能特別去注意Madeleine,怎麼辦?那就拍一部最賺人熱淚的影片,來吸引網友轉寄!這則影片很特別的是,它的「假想觀眾」亦並不是綁匪,因為這時候綁匪很有可能已經將小女孩「賣」給人口集團,說不定來到其他地方。所以這則影片主要訴求給「知道女孩在哪裡」的人,包括曾經經手過的所有人和他們的朋友、男/女友、親戚……影片問他們:「做一件對的事,還不晚!」要他們若看到這位小女孩下落,立刻與當地警方連繫。不過,女孩被綁走時只有三歲,英國政府還特別請專家弄了一個Madeleine在六歲可能的長相,甚至還將膚色處理了一下,可能是白色的,可能是健康的褐色的;頭髮可能是直的、或捲的……這部影片,刻意只拍了1分多鐘,主要訴求要大家告訴大家,有沒有看到這名小女孩?

結果,影片顯然非常成功──

才PO了四天,單單英文版,就有30萬人爭相觀賞。除了英文還有六種語言版本,包括葡萄牙文、西班牙文、阿拉伯文、法語、德語、意大利文,觀賞者則來自全球,讓女孩的父母燃起一線希望。

第二則則是一場值得高興的「找人事件」,一位叫Ken Hill的美國人對全網路宣布,他即將展開一場「找尋生父母」的活動,他目前在微軟任系統工程師,九月期間寫了一篇文章在他的部落格裡,Ken在文章中寫得很坦承,他的養父母其實很好,在他很小的時候就告訴Ken,他是被認養的。後來,他和他的兄弟姐妹都處得很好,Ken的生日是在5月2日,但他們都會在兩個日子為Ken慶祝,一個是5月2日,一個是5月5日也就是他被領養的那一天。不過,他也寫得很直接,他覺得他長得完全不像他們家人,在家庭照片中看起來他又矮又奇怪,有點突兀的感覺,但他的養父母都很愛他,他的養母每次抱著他,都會一起為他的生母祈禱,希望她現在過得很好(真感人),養母也不斷的告訴Ken,生母要把孩子讓出來讓人領養,一定是一個非常非常非常痛苦的決定,要Ken以後一定要原諒她。

他的養父母,不幸在幾年前過世了。今年初,已經快要40歲的Ken,不知為何出現內出血的急症,在醫院待了幾天,之後他突然就領悟到,明年即將滿40歲的他,生父母就算可能也已經來到65歲左右(等一下會講為什麼),他希望能見到他們!他希望找到他的生父母!

這是埋藏在他心中多年的夢想,他決定去面對他,他要找到他們!

有趣的是,Ken的認養過程其實不是那種「撿來的」,而是經過合法程序,所以Ken知道他自己是1970年5月2日出生的,甚至知道是西雅圖的哪一家醫院出生的,也知道他出生自是4磅左右,甚至知道他的生父當時只是一位高三學生,在學校還是辯論社的風雲人物,而他的生母當時只是一個高一學生……。Ken的養父母在Ken出生三天後就到醫院「認養」回家,就只知道以上這麼多事,完全不知道生父母的姓名。

所以,理論上來說,是找得到Ken的生父母的,不過,Ken是在華盛頓州出生的,該州剛好有一條法律,禁止該州出生的小孩去看他們當初的出生記錄,如果申請是可以請官員代為向生父母通知,由生父母決定是否安排。Ken怕他的生父母會不想要見他,所以決定「主動出擊」。他動用了網路資源,他使用Facebook平台,在上面要大家加入他的帳號,兩個月以來,他雖然還沒聽到生父母的下落,但已經收到一些小學同學主動來信,也有一些老家庭朋友主動來信,但,就是沒有生父母的消息。這件事還在進行中,網友紛紛鼓勵Ken,祝福他找到「他們」。

以上兩個案例看完之後,我的直接感想是──其實,這兩個案例都沒有將網路發揮到極限。以第一則找小女孩的影片來看,它真的只是政府單位「第一次」拍這樣的影片,我認為影片的吸引度還可以再加強一點,不然下一個孩子得到的觀賞率可能會腰斬一半。第二則找生父母的社群活動來看,Ken的方法略嫌老舊,部落格 + Facebook個人頁面 + Twitter的推廣手法還可以再純練一點。

不過,有趣的是,儘管它們都還有進步空間,但這兩則案例卻都已經在網路上輕鬆的創出成績、造成一些討論、轉寄。因此我們在看,到底「找人」是不是一個新的網路機會?

若是,這機會是什麼意思?

最近有一種說法,「驚喜」可以造成購買的結果。以歐美的習慣來看,他們喜歡幽默的東西,所以你在任何地方給他一個驚奇,他整個嚇一跳,和他原本想像的不一樣的時候,他就會掏出錢來買下。

但,只有「驚奇」嗎?我覺得,「好奇」才是更長久的,這也是為何像這種「找人」的影片、行銷做法這麼容易成功,因為,「找人」這件事,本身天生的就含有「好奇」的成份在裡面。「找人」兩個字就代表兩個意義,第一個意義是「這個事主現在相當著急」,你就很「好奇」到底是發生什麼事,會讓這事主想要「找人」;第二個意義則是因為人還沒找到,人還在進行中,我們也真的很「好奇」,最後找到的時候,會是什麼樣的狀況?

這兩個好奇,可以重覆在很多很多不一樣的「找人」事件上,只要是「真有其人」,而且他很有機會還是生還著的,大家很希望促成這件事發生。以這樣來看,「社群找人」仍是一個很大的機會,「尋人影片」、「找人實況轉播」,都會繼續是一個不錯的機會,而它們的關鍵在於繼續的誘發人類自然的「好奇心」,以好奇心加上一些公益做善事的熱情,去幫忙這些事,說不定,「找人」會是正在成形中的網路下的一個產業類別,創業家現在可多想想,這邊還可以做什麼事、出什麼新點子呢?

文章來自mr6

文章提供BAYSTARS DESIGN網頁設計公司

新創商品如何靠「沒有創意」,建立1.6億台幣營收規模?

今天寫個小小的創業成功故事,這星期在《華盛頓郵報》上面看到一個有趣的成功案例文章,它在形容,某個人是怎麼發現一個商機,然後開設一間網路商店來爆紅的──

這位創業者叫做Jeffery Morin,他應該沒想過他會創業,更沒想到他會在27歲,還沒結婚,就在網路上賣東西海賺了500萬美元(台幣1.6億)。

這位仁兄在七年前,跑去加入美軍當兵,就在他們的艦隊行駛在中東的紅海,休息的時候,其他同袍忙著抽煙和玩樸克牌,他則自己拿著筆電上網(天啊,軍艦可以上網?),到eBay四處逛逛。可能是因為在當兵的關係,他也很快的發現網路上有人在賣一些軍隊的紀念幣(military memorabilia coins)。

什麼是軍隊的紀念幣?

這種東西平常人應該一輩子不會碰到--它是美軍有時候辦了什麼演習或什麼獎賞的時候會印製的特殊紀念幣。這些紀念幣在eBay上面賣得並不貴,每一個才15美元而已,但有趣的是,這位20歲的年輕人因為常常逛軍中的福利社,知道這樣的紀念幣在福利社中只賣5美元。年輕人立即看到了「價差」,雖然每一個也只賺10美元罷了,但他立刻就到福利社買了30個,還和老闆凹到每個打九折以4.5美元成本單價購買,再以比別人便宜的11.50美元賣給eBay上面的買家,每一顆紀念幣他可以賺到7美元。就這樣,這位年輕人做起了生意了。

但這生意真的很難做,因為他每一個紀念幣他都必須要拿泡泡信封包起來,用手寫上對方的住址,還要去弄成包裹寄出,這些又另外加了一美元左右的成本,還沒計入他的人工費用,以及有可能不小心寄丟的潛在賠本的成本。然後,他又發現在eBay上面絕不能貪「快」而一次賣一大堆,希望接「大訂單」,而要一顆一顆紀念幣慢慢來,這樣每次的競價才會競得夠高。不過,這位20歲的年輕人可說是「傻傻的」,就用每天中午吃飯休息時間,包紀念幣、寫住址、上網上新的檔……就這樣,他一個月賺到大約300~500美元,沒有再多,但也沒有再少;每天雖然都在競標網站上讓網友競價,但也沒有一天讓他真的多賺到哪裡去。

如果他這時候跑去問任何一位專家,專家肯定告訴他,你這樣做很沒意思。紀念幣顯然是一個很狹窄、需求不大的市場,再怎麼做就只有這樣而已!

不過,年輕人就這樣傻傻的做了六個月。

六個月後,他收到一封來自Ohio的信--

那是一位婦人,她顯然對這位年輕人在賣的紀念幣不太滿意。她問,咦,有沒有一種紀念幣,專門賣給像她那樣,孩子在美軍裡面服務的「軍人的母親」的?

奇特的事情來了。首先,這個「需求」,是六個月之後才有人突然提出,而且只有這位婦人提出過,沒有下一個再提出。此外,如果一個軍隊的紀念幣都只有如此多人購買,為何將此紀念幣做成「專給軍人的母親」的,就會有更多人購買?不可能嘛!也就是說,這位年輕人其實有千百個理由去否定這樣的一個從客戶直接過來的請求,他稍微用一點點商業判斷,就會很快的下一個「不理她」的決定。

但,成功的人,想的永遠和人不一樣。甚至我們不確定他是否真的有去想過。總之,這位年輕人,就真的很認真的去找。結果當然是找不到這樣「專給軍人母親的紀念幣」。然後你猜發生什麼事?這位年輕人,或許也是思念在家鄉的母親,他請一個很會畫畫的同袍,設計出這個「軍人的母親」的紀念幣的花樣,然後從Google上找到一間專門可以客製化的銅鑄紀念幣的廠商。年輕人花了300美金(台幣1萬元)開了這個鑄模,然後此後的紀念幣一個成本是3.5美元,他只先試做了100個「專給軍人母親的紀念幣」,花了他750美元,大約兩個月的收入就這樣投回去給了製造商。

他的第一個顧客,當然就是那位媽媽,除此之外,他跑到一些專讓「軍人的母親」集結的線上討論區、部落格去留言,用最基本的方法慢慢的將這麼一個他自己設計的紀念硬幣宣傳出去,結果你猜發生什麼事?

100個紀念幣,在短短3小時內,就被訂購一空。他每顆賣10美元加運費,所以他小賺了250美元,利潤空間是25%左右。

看到「爆紅」,年輕人馬上又請鑄工廠再做了500個,亦PO上網去賣,結果又是在3天內銷售一空!這一次他再小賺了2500美元。

這是一個無心成為商人的年輕人,第一次嘗到什麼叫做「做到生意」的感覺。年輕人也請他的母親幫忙做這個生意,母親從他們老家那邊出貨,他來負責網路接單。做大了以後,他也學其他商品,運費也「提高」到4美元左右,這個運費客戶願意欣然付出,而他的獲利也更多了。

接下來,他的擴張策略也很簡單。原本他都是做「專給海軍的母親的紀念幣」,現在擴張到空軍、陸軍……,原本只給母親,現在也給父親、兄弟、姐妹、表哥堂妹、老師、鄰居…所有所有的人都有他們的紀念硬幣。他的工廠也一直換,成本一直壓低,最後,據報導,他找到一間在中國大陸的工廠為他鑄造這些紀念幣,每個硬幣的成本從3.5美元驟降到0.9美元而已。

這時候是2003年,他已經離開美軍,每個月的營業額為1.5萬美元,他的收入已經超過了一般的上班族,而他的「公司」只有他和家人而已。這時候,他學會了更積極的網路行銷手法,跑到搜尋引擎大量下關鍵字廣告,幫客戶做客製化的紀念幣。這時候大賣場Target來談合作,要他們做的並不是「給軍人」的紀念幣,而是給「星際大戰」。Target一次訂了五萬個。目前這年輕人已經開了5間公司,總和收入為一年500萬美金,其中250萬是製造成本,100萬為給搜尋引擎的關鍵字廣告成本,50萬美元是人事成本,每年這間公司可以淨得100萬美元(3000萬台幣)左右。

這位年輕人,可以說是許多默默成功、默默賺到百萬、千萬、億的年輕網拍商人的故事。但他的故事顯然又要更有趣一點,因為他真的挖到了一個完全藍海、完全沒有任何競爭者的產品,而奇妙的是,他挖到這個新創商品,本身卻完全不是因「創新」來做到的。

我們回顧他的幾個關鍵:他本身喜歡網購,觀察到福利社的商品,所以他看到了「價差」;看到價差之後,他開始接觸客戶;接觸客戶以後,這些特殊的客戶報給他一個更特殊的「需求」,這個需求由他小量製造後馬上造成「爆紅」,爆紅之後他再擴大他的產品線……。

這個過程,如果此人「太有創意」,會發生什麼事呢?

太有創意,意思就是「不聽話」,自以為的去做一些新的嘗試,不等時間醞釀讓他去等到那個價差、不等時間醞釀去等到那位要求客製銅幣的母親……說不定他跑去做其他的商品,從此就成為只是「其中一個」載浮載沉的網路小賣家,有一餐沒一餐。

網路就是這麼有趣,誰說創意就是老大?不過,無論創意或不創意,更重要的特質,或許是「堅持」二字。

尤其是那種看起來有點傻、傻到好像沒什麼去仔細想過的堅持。

文章來自mr6

文章提供BAYSTARS DESIGN網頁設計公司

三家速食連鎖餐廳推出「免費」雞肉的網路行銷案,其實犯規累累?

這星期六,「NET-MBA網路行銷、流量、獲利、募資、社群微網誌成功案例分享五堂課」即將進行第8屆的第一堂課。每次開始新一屆,又是好時刻來了,每次同學不一樣,又可以認識一些新的網路行銷或網路想法的朋友。有興趣者請儘快報名參加本周六課程、加入這個大家庭。

今天想提到的是KFC的網路行銷術,我們必須說,KFC不如「漢堡王」走的路線是超創意的功能路線,幾次看下來,KFC行銷團隊最擅長的顯然是「網路輿論」這一塊。我們來看看它怎麼在沒有製作網站的情況下,用某種設計來操作如大象般難以控制的網路輿論?

最近KFC再次強力推銷它的「烤雞」,先前曾經向聯合國申請希望讓它的「燒烤王國」(Grilled Nation)加入聯合國,上星期更傳出一則驚人新聞,KFC不知道怎麼弄的,竟然讓肯德基爺爺桑德斯上校,就這樣穿過了兩層的安檢防護(沒人認出他來嗎?),走進聯合國大樓,並且和今年九月才當選聯合國General Assembly主席的Ali Treki握手合照!此舉當然讓KFC一瞬間爆紅全網路,而且已經因為「玩得太過火」造成聯合國兩名人員被查問,有人說是Treki的女兒引進肯德基爺爺的……。

不過,剛剛那則新聞,主要是KFC希望推銷它正在進行中的另一個同樣推銷燒烤的行銷活動──這個叫做「UNFry Day」,已經是第三次舉辦,請注意,這不是折價,也不是買什麼套餐送你免費飲料,而是你空手前來,只要帶著這張券,可以直接拿一個免費的烤雞肉回家吃!這件事已經發生在上周一(10月26日),而且似只有在美國,沒吃到的已經來不及了。原本,這只是KFC三次嘗試送免費的烤雞試圖扭轉大家對肯德基只會做炸雞的印象,不過──

不過,這次,競爭者有了不一樣的反應。

據另一篇報導,這次在KFC突然宣布要三度舉辦「UnFry Day」,竟然有兩家也「跟著上」了!另外兩家,一家是原和麥當勞有關係的Boston Market,它專賣簡單的雞肉餐;另一家則是加州的烤雞速食連鎖El Pollo Loco,以它的大火燒烤與橙汁醃製的雞肉而出名。這兩間KFC的「競爭者」,紛紛趕在上星期,搶在KFC的同一時間,連忙辦出了他們的「免費行銷」。

三家雞肉店在短短兩星期內,全部擠在一起大膽的推出「免費」,這,就是值得分析的案例了--

因為,這幾家免費,其實都免費得「不太好看」。讓我們來看看──

先來參考Boston Market的行銷活動,它推出一元的雞肉餐,他嗆聲,KFC那套根本不算什麼,「才一天而已!」他說,「而且才吃一塊雞肉,大家應該還是很餓吧!」他們決定提供「久」一點,也提供「多」一點,包括一隻1/4的雞,還有該有的馬鈴薯泥、麵包都應有盡有的完整套餐。驚人的是,這個全美國的行銷方案其實準備期只有四天,據報導引述內部說,他們趕在KFC即將開始的前五天(周四)才完成行銷計畫,周五召告各分店,周六立刻在網路上宣佈,周日立即開始接受一元雞肉。他們的推銷方式仍然是用一個VIP Club的email名單,不過一般人很快就發現也可以自己到Boston Market的官網去下載那個報名表。但不幸的是,才不到一星期,Boston Market就宣布「停下」,現在已經從「一元雞餐」改變成「雞餐折價一元」,真是差很大耶!之前他們說的KFC太小氣才一天,他們咧也才一天多,而且還收了1美元的情況下!

至於第三間El Pollo Loco,更是誇張,它是在KFC準備開始的前四天(周五)的下午才敲定準備「迎擊」,參加的辦法還蠻簡單,只要在它的Facebook或Twitter留言就可以了,回答一個問題:「為何大火硬烤(flame-grilled)的雞肉,會比烤箱慢烤的雞肉還要好?」用這個問題來表達出KFC與他們家雞肉的不同處。然後,他們推出這個倉促的行銷活動之後,會從這些留言者中,選出一位幸運者,給他52張折價券,可在一年內每周都吃道免費的兩塊大火硬烤的雞肉!他們怕這招感覺上「中獎率不大」,所以又順便一提,如果哪個人特別有「創意」,他們還會頒發「創意獎」!

哇塞,真是莫名其妙的手法!不過這間也對,因為最近記者都在講KFC的免費行銷,他們藉此可以至少登上記者文章的一小塊角落,儘管網路人看到了可能對這家廠商的誠意大打折扣!

看到這些史無前例的「免費戰」,有一個很深刻的印象。「免費」到現在還是一個很有效、很有效的行銷手法,畢竟現在人們已經被各式各樣的「折價」給弄得很煩了,所以除非是星巴克這種某些人(如我)天天都要去拜訪的突然推出買一送一,說什麼我都會馬上去買一杯,其他的折價券呢?大概看過就忘了,連裡面的小字都懶得去看。但是,「免費」的折價券,效果就是不一樣。它說明白了,你過去只要免費吃一個東西就好,不必帶錢都可以,而且也說好那個「量」不會只是給你一個小試喝杯,而是一份端端正正的完整餐點,也就是說天下沒有白吃的午餐,只要來這邊就可以白吃的意思!所以,小廠都還是可以用這招來取得勝利!

而且,這三家都不約而同的用網路的方式,沒有網路,他們大概也不會推出這樣免費的東西。也就是說,網路的活絡、活躍、活水,將這些「免費」的題材的行銷效益提升至最大,他們要試的其實不是讓這些人真的去試,因為根本不可能讓足夠多的人去試的,而是這些去試之前、之中、之後,網路上所傳出的效應。有些記者、有些部落客,肯定會拿這個為主要的文章來寫,這不幸的還包括在下本人在內。

不過,問題就來了。免費的促銷,肯定是讓商家耗盡資本的危險做法,這時候,要怎麼做免費促銷才不會不小心得罪網友?其實,KFC肯德基在今年五月進行前面一次的「UnFry Day」的免費行銷時,因為不小心讓歐普拉報到電視上去,造成空前的瘋狂人潮,後來它必須出來道歉:「對不起沒有讓你們吃到免費的東西!」他們的解決方式是,讓這些饑餓的顧客改以郵寄請求的方式,總公司再寄發折價券給他們,很多人大概就受不了,直接去買了吃了算了!

這次有了KFC在前,為了推這「免費」專案,這三家其實也都做了一些小技巧,有些幾乎是「犯規」的手法,來禁止過多的人過來,又巧妙的達成促銷的效果。譬如以KFC來說,它是在前幾天才公佈的,因此當許多人知道的時候,活動其實已經結束了。

Boston Market更進一步,他儘管衝著KFC而來,對它嗆聲,但它自己也跑個一周左右就宣佈「雞肉不夠」,換成一元的折價券,比KFC還沒誠意。很多人不小心下載那張券,恐怕會以為那是「一元」就直接拿過去消費了,再讓服務人員再好整以暇的優雅的告訴客戶請他/她再仔細看一下手上的折價券上面寫什麼,讓客戶氣呼呼的只好花錢買下這雞肉全餐。

再看El Polo Loco,它推出的更是一場普普通通的行銷活動,連個網站都不必做,只要在Facebook或Twitter裡面留言,就有機會得到一整年的雞肉可吃,誰知道裡面這個網友是不是真的網友?這個活動不必網路重度人,很多人可能都已經嗅到它根本就只想搭著KFC的「順風車」,來玩玩網路的宣傳。

驚奇的是,這三個犯規連連、出爾反爾的網路免費促銷行動也說明了,其實只要推出「免費」,那麼網友的「火侯」其實也真的還蠻好控制的,因為,這時候大家對於「免費」的食物,還停留在「驚奇」的階段,還算是可以包容,連那位記者對Boston Market的促銷也不相信而跑去試了一下,網友對免費覺得不可思議,因此這時候,他們還尚可以接受一些「犯規」嫌疑的做法!也就是說,現在商家依然還是可以勇敢的大打免費商機,譬如很晚才公佈、沒對全國公佈、突然撤銷、模擬兩可……大家還有一個空間可以再來試試免費的行銷術,只要真的「說免費就免費」。

不過,如果十一月初這一系列「免費促銷」真的吸引到其他產業的行銷人員的注意,那麼,從今年到明年將會有很多網友再受惠,但商家的黃金期會愈來愈縮短了。待網友胃口養得太大大,商家就不能亂搞犯規連連的網路行銷了。

網路行銷實在無奇不有。

文章來自MR6

文章提供BAYSATRS DESIGN網頁設計公司

FAD is BAD?「曇花一現」絕非失敗反而通往更大的成功

我們都有這樣的經驗──

走入一家餐廳,肌腸轆轆,口水已經滿到牙齦邊,點餐喔!快點!菜來囉!好香啊!

一大盤又一大盤的大熱炒、大鍋湯,吃得好過癮、好過癮,嗚呼,太爽了。

不過,吃完後,實在飽到不行,看看剛剛點的這些菜,這才發現,這些菜還真鹹真酸啊,害我現在好想喝一口水,將水勉強的灌進已經滿到食道的食物,這時候頭昏眼花,真的好想發脾氣,心裡暗罵:「以後不來這家吃了!好鹹!」有些餐廳雖然好吃,但口味很重。第一口你會覺得有如天上美味,吃到快飽時卻很想吐。有趣的是,餐廳有百百種,但這種「不耐吃」的餐廳,是我們大家都不喜歡的。

儘管,每次走進去,吃的第一口,依然是這麼像天上的美味,但是,我們清醒的時候對它不會有太好的話語。這是極有趣的人性,對「Fad」幾乎不理性的不喜愛,我們大家顯然都很不喜歡那種「曇花一現」的感覺,儘管那盆「曇花」曾經讓我們感動到流下眼淚。

「Fad」就是美國人口中的曇花一現。所謂Fad就是所謂的一窩蜂的爆紅商品,可以說是一時興沖沖想買下或吃下來的東西,但由於它「不耐看」、「不耐吃」,很快就膩了,那種膩的感覺成反作用,反而讓人討厭,長期過後,留下後世的笑柄。這星期看到一位美國行銷部落客寫的最新文章,這篇文章是在批評「布希鞋」(Crocs,之前我也寫過一篇關於布希鞋的文章),有趣的是,它還畫出一張圖,畫出歷史上幾個曾經一熱後來消失無蹤的「Fad」。最近在台灣也看到一張很類似的圖,畫的也是在這邊曾經造成「Fad」排隊排到外面去然後一晃眼又掉落到平地的釣鐘燒或蛋塔等等──

大家對這些Fad已經不是回味無窮,而是回頭思考,甚至「檢討」──為何一個商品會淪為「Fad」?會只有這麼可惡的一場曇花一現?

這篇文章就在問,「為何Crocs會走上現在這條絕路?」首先我並不知道Crocs已經如這位作者說的這麼慘,它的股價目前呈微回復的局面,店鋪也好像開得好好的,但這是表象?這位作者舉出幾個數字,我們來聽聽他怎麼說──

首先作者說,一個很紅的品牌,命運只有兩種,一種就是「Fad」,這個字在英文就如同「one hit wonder」那樣,讓人覺得有點崇拜但充滿了投機、不實際的感覺。另一種叫做「Iconic」,就是經典、長期的巨人。大家都覺得「Fad」是糟的,而我們做一個產品,就希望能做到「Iconic」的水準,這樣才是真正的英雄、真正的成就!然後,這篇文章很有趣,就在教我們,一個產品如何才能讓人久久回味,而不只是一時暴力塞給你一定要買的討厭Fad?它開頭就說,嗯,有時候,「成功就是你的最糟的敵人」(Success is sometimes your own worst enemy),一個品牌要怎麼避免走向Fad的可憐之路,完全取決於公司的策略。他開始細數Crocs當年爆紅的過程,他們使用加拿大實驗出來的一種特殊材質,做成水上活動用的休閒涼鞋,到了2005年,Crocs年營收達到1億美元,其中淨利是1700萬美元;到了2006年的年營收更是高達3.5億美元,淨利為6400萬美元,利潤空間還比前年更大,就在這一年,Crocs正式IPO上美國股市,成為鞋業史上規模最大的一次股票上市,Crocs也充份運用這筆資金來繼續建廠、購併其他廠商……。到了2007年,Crocs更創下8.5億美元營收,利潤空間已經接近20%,非常驚人!

不過,好景不常,到了2008年(去年)Crocs的營收不幸的開始下跌,微滑到了7.2億美元,但損益沒搞好立刻慘賠了1.9億美元之多,公司立刻砍掉了2000名員工,股價也暴跌76%,據這篇報導說,到了今天,Crocs還沒甩掉嚴重的財務赤字與庫存問題。所以雖然看起來這一季的股價已較上季好很多但它已經不再是一年前那間風風光光的Crocs公司了。當然,在2008年那個氣氛,Crocs也說應該是「大環境的經濟影響」,消費者不花錢買Crocs鞋,但這作者完全的懷疑這樣的說法。他直接指出,Crocs所沒有做的五件事情,讓它走向Fad的慘烈命運:

第一、不要滿足需求:大部份的公司見到爆紅了,第一件事就是趕快擴大生產線、趕快來滿足這些需求。作者說,最不應該做的就是「過度製造」,雖然所有需求可以因此而被滿足,但當市場上充滿了你的商品,當初的「訴求」有可能受到一些無法預期的變化,首先有一些人可能在並不是很想買的情況下被逼著要買一雙,再者可能發現太多的狀況。所以你看有些餐館很厲害,明明這麼好吃的東西,它就給你一小盤,不要讓你吃太飽,大概也是同樣的意思。或許一個商品在熱紅的時候不應該「追加」,而是保持著原本的計畫,別為了搶一時的短期熱潮而壞了長程計畫。

第二、不應該加入其他的產品:Crocs的「原味」版爆紅之後,它也立刻加入很多其他的產品,有的可能根本長得完全不像原本的Crocs,而且Crocs開始走「外表路線」,原本Crocs就只是穿得舒服而已,這讓它產生了品牌的錯覺。後來Crocs甚至還買下專做體育穿著的公司,然後也開始製造Crocs的衣服!這位作者事後諸葛的說:「並不令人驚訝,這些(和原味Crocs鞋無關的新產品)後來都沒有起飛。」這些沒起飛的產品反而壞了Crocs原本深植人心的「就是又醜又舒服」的品牌形象,讓Crocs慢慢變成只是眾多品牌中的其中一個。

第三、不要讓這個商品四處都買得到:一開始Crocs只在一些特殊的商店才買得到,後來甚至自己開店。但到最後你在任何的大賣場都可以看到Crocs的蹤影。這樣很快的就將大賣場的胃口養壞,他們一開始還以能夠拿到Crocs陳列很高興,都為Crocs製作特別專櫃、給優惠的上架費,後來這些大賣場慢慢麻痺,將Crocs視為只是眾多鞋品牌中的其中一種。作者說,像Crocs這麼特別的品牌,應該和少數的賣場談特別獨家販售的deal才對。

第四、不應該忽略「核心客群」:原本的Crocs是給運動人士、醫生護士、小朋友穿的,但後來它不再專注在這個最核心的客群,想要變成一個「大家都愛」的鞋子,這就讓這些核心客群失去了穿Crocs的動機,當初買Crocs也養成了穿Crocs的習慣,認為它就代表了自己的(運動)特色,但現在穿Crocs已經沒有這個感覺,當初好不容易製造的忠誠度也因此消失了。這位作者表示,一個產品不要只是Fad而讓人回味無窮的關鍵,就是它擁有一批莫名其妙死忠的客戶,這一群客戶會決定了它是否能長長久久。

第五、不應該快速全球發展:作者說,Crocs兩年前股票上市後,立刻花錢在中國大陸與墨西哥建廠,然後在荷蘭與日本都蓋了新倉庫,快速的擴展全球,但這樣的速度實在太快了,讓它失去了本土美國這邊的專注力。這位作者最後的結論是,Crocs有很棒的品牌、很棒的名字、很棒的點子,但最後唯一缺的是小心的行銷策略,讓它終究就只是一盆「曇花」,一個令人遺憾的「Fad」。他一再強調,一個品牌如果只是「一眼瞬間」,轉頭就不見,賺了大筆鈔票,卻得不到世人的永遠愛戴與景仰與回味。他意思是說,「FAD is BAD」,一時的熱潮是糟糕的、是失敗的、是沒有弄好的……。

但是,是這樣嗎?

在網路上,我們看到的Fad,更是多得如天上的蝗蟲。許多網站,曾經是我們口中天天在講的,它的創業家也天天都出現在報上或演講的場合裡,可惜,不過一年兩年,就被追過、或就被捨棄。大家就會根據「FAD is BAD」的人性,去對這樣的歷史做了定論,我認為,這樣是不對的。

不對的原因,就只有一點:你永遠不知道,什麼才會走進歷史。

最近在看蔣勳寫的梵谷畫作的書,他提到曾經有一位一百多歲的老太太,成為世界上唯一曾經看過梵谷的「活著的人」,而她對梵谷的印象竟是:「他就是一個瘋子而已!我實在搞不懂為何世人這麼喜歡他?」這位老太太肯定不會叫每個人都是瘋子,大部份的正常人、甚至讓老太太愛戴不已的人,現在在哪裡?和梵谷的地位又如何比?

我們可以說,FAD只是我們現在這一群人,對我們有的記憶,來發表的一個「歷史定位」的言論。這一群人口中的Icon,其實是無法傳遞到下一代的。譬如我媽媽常常提到她小時候多麼喜歡真平四郎,但我完全無法體會;以後我告訴我的小朋友,當年爸爸多麼喜歡看聖鬥士星矢、七龍珠,那時候的比現在的什麼119特警隊還要棒到幾百倍……他無法體會這樣的感受。換句話說,FAD is BAD,只會存在我們這一代,而ICON is GOOD,亦只會存在我們這一代,隨著我們一個一個進棺材,不進棺材的也開始患失憶症或口齒不清以後(然後還是得進棺材),最後,都會一起被埋入土裡。

注意,這和財務無關。FAD是臭名,但是卻是賺錢的;一間公司一直不斷的做FAD,是有前途的,只要它認清自己是Fad的事實。但現在講的是「歷史地位」的問題,我們懷疑,Fad的做法,真的如作者所意示的自殺了自己的地位嗎?讓大家留一個好笑的感覺嗎?顯然不是。反而,你如果拚命的把FAD弄更熱,不斷的擺出就是要做Fads的姿態,說不定以現在成本低速度快的環境可以做出好幾個梵谷級的作品。如果不把自己拉到最極限,要怎麼知道極限在哪裡?

如果不讓自己拚命成為Fad,怎麼知道這個Fad是否還能再進一步留傳千世?

如果這樣講,剛剛這位作者很熱心的理出了「五個避免成為Fad的方法」,反而都可以再「反一下」然後拿來使用!譬如──

應該快點滿足需求,應該加入其他的產品,才知道還有沒有其他更厲害的變種!

應該讓這個商品四處都買得到,應該快點發展核心族群外的其他族群,甚至應該快速的在全球擴展,才能夠快速的測試這個商品是否真有全球人人認為的「永恆價值」!

網路更是如此,還在繼續的前進中。如果現在就停了,就害怕自己變成下一個Fad,那太可惜了。我們要的是賺快錢,然後歷史的地位,至於現在活著的這60億人是怎麼看的?去他(們)的!或許到最後,正是這一群擁於追求爆紅、跌倒、又站起來爆紅、再跌倒、再爆紅的這一群網路世代,大家一起進入梵谷級的永恆。

文章來自MR6

文章提供BAYSTARS DESIGN網頁設計公司

2009年11月4日 星期三

行動召喚按鈕:實例與最佳實踐

英文原文Call to Action Buttons: Examples and Best Practices
版權所有,轉載請註明出處,多謝!


--------------------------------------------------------------------------------

行動召喚在網頁設計中——尤其是在用戶體驗方面——是一個描述在網頁中用於誘導用戶行為的元素的術語。在網站界面中,最流行的行動召喚的表現是出現在點擊表單按鈕、完成一個行動(比如”Buy this now!”)或使用附加信息帶到一個頁面(比如”Learn more …”)等請求用戶來採取行動的地方。

我們如何創建有效的行動召喚按鈕來吸引用戶的注意並引誘他們點擊?我們將在本文中通過分享一些有效的設計技術和查看一些實例來嘗試回答這個問題。

有效的行動召喚按鈕的最佳實踐
設計行動召喚按鈕到網站界面需要一些遠見和計劃;它必須是你的原型和信息結構流程的一部分以使他們能夠正常工作。在本節中,我們將討論行動召喚按鈕的設計技術。

用大小吸引用戶注意
在網頁中,一個元素相對於其周圍元素的大小表明其重要性:元素越大,它就越重要。判斷網站的某種行為有多麼至關重要,行動召喚按鈕的型號也應相應的調整。

行動召喚按鈕與周邊元素

Lifetree Creative展示大小的主意以表明他們的行動召喚按鈕的重要性。將按鈕的大小與公司的logo對比。為了吸引用戶的注意,這個行動召喚按鈕在寬度方面比logo大了大約20%。儘管logo在頁面中放的比較高,你的眼睛還是被吸引到了行動召喚按鈕,因為它相對於周邊元素比較大。


行動召喚按鈕與不太重要的行動召喚的大小

一個網頁可能有多個行動召喚。為了區分一個行動召喚與其它行動的相關重要性,你可以改變他們的大小。這裡在paramore|redd網站有一個使用這個理念的實例,那個頁面的讓用戶註冊以獲取郵件通知的行動召喚按鈕明顯的比繼續閱讀性東召喚按鈕大一些,表明在該網頁中,與繼續閱讀日誌相比他們更希望你採取訂閱


使用突出的位置吸引用戶注意
頁面中的行動召喚按鈕的位置是吸引訪問者的注意的關鍵。放置在突出的位置,比如頁面的章節的頭部可以帶來較高的頁面轉換因為用戶將很可能注意到行動召喚按鈕並採取行動。

放置在明顯的區域、

將一個行動召喚按鈕放置在一個明顯的區域是一個讓它在頁面佈局中突出的一個方法。你可以在dailymile看到這個概念,行動召喚按鈕看起來在一個比其它元素比如圖形條高的層面上(在頂部)。


放到頁面的頭部

為了闡述這個概念,看一下位於Your Web Job頁面最右上角的”Post a Job!”行動召喚按鈕。通過將行動召喚按鈕放到一個非常醒目的區域,這樣好像用戶會注意到它或者稍後記住它,在他們看過網站的內容之後。比如一個職位發布者想要在他們發布職位之前瀏覽一下網站,”Post a Job!”按鈕將隨時為他們準備好,無論哪個頁面引導他們跳轉,他們會更可能記得他們可以很容易的執行這個行動的地方,因為它的位置足夠顯眼。


放在佈局的中間

將一個行動召喚按鈕定位到頁面佈局的中間——而不是兩側(或明顯比較小或者不重要)的位置——可以是一個很有效的吸引註意和誘導一個行動的方法。在例子PicsEngine中,儘管這個行動召喚按鈕沒有使用與其背景色和頁面中周邊元素高對比的色彩,它依然能夠因為其居中的位置而很容易引起注意。


使用空白來從其他頁面元素中區分行動召喚按鈕
行動召喚按鈕周圍的空白(或者無效空間)的使用是一個讓它在有很多元素的區域中突出的很有效的方法。

用於區分行動召喚按鈕的空白

IconDock展示如何有效的利用空白。即便使用一個很小而且簡單設計的行動召喚按鈕,它依然很突出,因為在它和鄰近元素之間的空間。


改變空白的數量以表明邏輯關係

行動召喚按鈕與其周邊的元素之間的空白越多,他們的聯繫越少。因此,如果你有其它元素能夠有助於說服用戶採取行動,減少那些元素之間的空白和間隔。

例如,Donor Tools在他們的”Sign Up”行動召喚按鈕上面有些文字,它們告訴用戶註冊的好處。在它的右邊是一個瀏覽器截圖只是用於美化的,而且對激勵用戶點擊”Sign Up”行動召喚按鈕不是必須的。通過減少文字和行動召喚按鈕之間的空白,你將這兩個元素可視的組織到了一起。瀏覽器截圖和一個圖片保證用戶的實現不會從行動召喚按鈕上面轉移走。


使用高對比度的顏色
決定在行動召喚按鈕上使用哪個顏色很重要。在你的行動召喚按鈕上使用一個相對於周邊元素和背景色對比度高的色彩,因為這是讓用戶注意到你的行動召喚按鈕的關鍵。

與周邊元素形成對比的顏色

Notepod例證在一個行動召喚按鈕和它周邊元素的色彩反差是如何能夠有效的吸引用戶的注意的。周圍元素都是黑色的,而這個行動召喚按鈕卻是淺藍色。


背景/前景色彩反差

Valley Creek Church設置它的淺黃色”Learn More”召喚按鈕到一個灰度圖片上面。就算使用一個簡單的行動召喚按鈕設計在一個複雜元素的上面(此處是一個圖片),它依然因為色彩選擇而醒目。


提供次要的替代行動
一個頁面可以有多個行動召喚按鈕。有時候有必要提供一個次要行動以便於說服用戶稍後訪問你希望的主要的行動召喚。比如,在用戶註冊一些網絡服務之前,一些用戶需要了解更多的信息才去執行註冊的行為;次要行為可以請求他們體驗一次產品之旅或者訪問展示產品的更多信息的頁面。

在主要行動旁邊顯示次要行動

OfficeVP顯示兩個挨著的行動召喚按鈕——居中並放在頁面頭部。通過區分顏色,用戶可以看到他們有兩條不同的路:他們可以直接註冊(主要行動),或者如果他們在註冊前希望了解更多,他們可以選擇第二個行為,體驗一下先。


Transmissions 也展示了在期望的重要行動旁邊放一個次要行動按鈕的概念。這樣的話,主要行動就是讓用戶購買該應用。如果他們想在購買前試用一下,那麼第二期望的行動就是先下載該應用。注意主要行動通過做的比次要行動按鈕更醒目來被標識出來,相對於背景色比次要行動按鈕有更鮮明的對比色。這樣,你就很有效的從左到右移動目光。 。

另外,注意兩個行動召喚按鈕之間相對於該區域其它元素的縮少的空白的使用,有效的將按鈕組織到了一起。


在主要行動召喚按鈕下面顯示次要行動按鈕

另外,你可能想將次要按鈕放到主要行動下面。如果你需要更好的區分你的行動召喚按鈕的話,這可能就是有必要的了。Virb 展示了這個方案,”Join Now”行動召喚按鈕被放在次要行動“體驗產品之旅”的上面。注意,次要行動按鈕因為它的默認狀態被用比較弱的色彩遠遠的從主要行動隔開了。


傳遞一種緊迫感
通過使用大膽的、肯定的和命令的詞語表達這個行動可以改變用戶的看法,用這種方法說服他們不應再等待才去採取行動,以及等待可能會造成某些懲罰或者錯失良機。

tap tap tap通過給一個行動召喚按鈕添加緊迫性來證明了這個主意。 ”Buy Now”行動召喚按鈕上面有“價格信息(Intro price)”的文字,巧妙的暗示用戶行動拖延越久,將來在這個介紹的價格過期的時候可能要支付的更多的風險就越高。


通常,創造緊迫感可以有效的暗示用戶去採取行動。使用單詞比如”now”、”immediately”和”right now”可以傳遞這種緊迫感。看一看Organizing for America (BarackObama.com)呼籲網站訪問者”DONATE NOW”的例子。如果只是簡單的說”Donate”,緊迫感就會消失,用戶也可能會更少的去採取行動。


告訴用戶採取行動是很容易的
通常,用戶遲疑採取行動是源於考慮一個姓對可能會比較困難、昂貴或者費時。通過照顧這些擔心,你的行動召喚按鈕能帶來更多的轉換(點擊)。

你如,在Basecamp上,行動召喚按鈕明確顯示用戶註冊將會花費的時間以及註冊是不花錢的(free)。這種做法消除了用戶將要在線採取行動是的兩個主要顧慮:費用(這也會要求他們採取格外的操作比如拿出他們的信用卡)和時間限制。


在Tea Round App的例子中,他們告訴用戶註冊他們的郵件服務將不會受到垃圾郵件,這是無論何時將你的Email提供給第三方服務時擔心的一個事情。


告訴用戶期待什麼
大部分網站用戶猶豫於相信在網頁上呈現的表面價值。根據經驗,他們的信任已經被燒光了——聲稱免費服務的鏈接,卻不得不輸入他們的信用卡號碼才能得到他們想要的服務。為了增加點擊轉換率和重建信任,預期用戶的懷疑並告訴他們通過採取你為他們準備的行動將會得到什麼。當設計一個行動召喚按鈕,考慮到用戶可能會有的所有潛在的問題,然後確定你可以及時的回答他們。

Mozilla Firefox 告訴用戶通過點擊他們的行動召喚按鈕的詳細的預期。這個行動召喚按鈕告訴你你將會得到Firefox 3.5,它是免費的,以及(對那些更多的特性)它的確切的版本是3.5.3 forWindows 操作系統,語言是English,然後你可以預期一個7.7MB 的下載。


Onehub預料到用戶是否(在採取行動上)需要先支付或者他們是否能夠用一下產品作一下測試的問題,告訴用戶如果他們採取註冊的行為,他們將獲得30天的免費試用。


行動召喚按鈕設計展示

現在我們已經講了一些設計行動召喚按鈕的最佳實踐,讓我們看一些網頁上的行動召喚按鈕的典型實現。我們將配合這些設計和上面的技術和最佳實踐,並瀏覽他們如何幫助實現這些良好的設計。

Campaign Monitor
這套行動召喚按鈕顯示兩個潛在的用戶行為:”Try it for free”和”View features”。對於已經了解Campaign Monitor和想要現在嘗試的用戶來說,他們可以執行首要期望的行動,而其它的想要在作出時間承諾之前瀏覽一下可以選擇查看該網絡應用的更多特性的次要行動。


Fileshare HQ
這個行動召喚按鈕告訴用戶預期的事情(”開始在片刻間分享文件(start sharing files in minutes)”).


Livestream.com
這組行動召喚按鈕使用垂直排列分組以表示展示給用戶的這些行動的期待的重要性順序。主要期望的行動是獲取一次評估,接著是了解服務的詳情,最後是對比不同方案之間的差別。


Traffik CMS
這個行動召喚按鈕被放在一個非常醒目的位置,在頁面的最頂部,並用型號和色彩從周邊相關元素中高亮了出來。


Hambo Design
這個行動召喚按鈕告訴用戶預期的事情:通過獲得報價,沒有附加的東西。它預料到了”如果我要花費時間進行這個流程的話一份報價將花費我多少?”的問題。 (該網站已經被改版——譯者,神飛。)


The Resumator
你可以在這個行動召喚按鈕上看到很多最佳實踐。首先,它使用了空白、大小和顏色來清晰的將自己和頁面其它元素區分開來。然後,為了創造邏輯的分組以說服用戶採取行動,它在按鈕上面的推薦文字上使用較少的空白,然後將次要行動”Take a tour first”放到它的下面。

本文譯自Smashing Magazine,轉載請註明出處,多謝。


Wufoo
Wufoo提供了兩個行動,用戶可以看到一個水平排列的樣式,主要期待行動是左邊的那個。這些按鈕很大而且很難錯過,儘管看網站的全局設計的時候它們並不是很顯眼。


Mobile Web Design
這個行動召喚按鈕被放在一個醒目的位置;它有較大的型號和一個獨特的顏色——尊重了周邊的元素。為了“Purchas the book”上提供附加的上下文,這個行動召喚按鈕下面防止了一些文字註釋的價格和可用的格式(傳統圖書或者PDF)。


NCover
這些行動召喚按鈕很整齊。主要行動在藍色的次要行動的上面。用戶被吸引到這個按鈕是因為大小,而且對次要期望行動使用藍色調可以減弱它對相對於主要期望的行動。注意空白的使用以創建三個相關元素的邏輯分組有助於實現銷售:文字告訴用戶Ncover是乾什麼的,註冊行動召喚按鈕,以及體驗行動召喚按鈕。相比之下,注意此組和右邊的元素之間的空白變化。


Xero
本組行動召喚按鈕展示聽過一個次要行動的用法。在主要期待行動的右邊,有一個文字鏈接請求用戶“了解更多(find out more)”,對於不想立馬註冊的用戶來說,這個設計增加了用戶會在註冊之前“了解更多”的可能性。


Tao Effect – Espionage
這是一組行動召喚按鈕,為用戶提供三個選擇:Download、Buy Now或者Upgrade。這樣的話,主要期待行動就是下載這個應用,緊跟著兩個同樣的行動“Buy Now”和“upgrade”。區別是在行動召喚按鈕上使用不同哦你高的顏色,主要行動比兩個次要行動的顏色更醒目。


The Invoice Machine
這裡你可以看到兩個使用藍色邊框高亮的行動召喚按鈕,因為它們使用了同樣的風格,我們可以假定它們有相同的重要性。或許該公司確定用戶在看到他們提供的東西之前不太可能選擇註冊的行為,也或者他們確信產品之旅將更有效的幫他們將訪問者轉換為會員。


Ekklesia 360
這套行動召喚按鈕展示使用圖標來指示向前的感覺(用指向右邊的箭頭表示)。他們使用了一個相對於黑藍色背景的高對比的色彩以使行動召喚按鈕從頁面設計中突出出來。


Checkout
通過使用一個相對於全局設計的非常突出的顏色到他們的行動召喚按鈕,儘管在它上面的圖片明顯比按鈕的型號還要大,它依然能夠吸引用戶的注意。


spinen
使用直接而清晰的語言告訴用戶當他們採取行動後預期的事情:這樣的話,點擊這個行動召喚按鈕將讓他們找到產品的更多信息。


Codebase
這個行動召喚按鈕告訴用戶,通過執行這個行動他們能得到什麼:免費15天的試用。它通過使用高對比色彩、在左邊的一個圖標以及大量的空白來吸引用戶的注意。


GoodBarry
在這個行動召喚按鈕中,你可以看到空白、型號以及聰明的色彩選擇是如何有效的讓一個行動召喚按鈕變得非常醒目。強調這個行動是免費的”FREE”能夠暗示用戶他們的預期。


Wake Interactive
這裡,這個行動召喚按鈕相對於其周邊元素的色彩令它突出出來,儘管它的周圍的空白比較小。


OH! Media
這個行動召喚按鈕真的從頁面中脫穎而出了——因為它的位置、周圍的空白以及——最重要的——顏色的選擇。看一下這個頁面,目光被直接吸引到這個行動召喚按鈕上了。


Pixelcrayons
看看空白能夠如何很棒的提升行動召喚按鈕吸引註意的效果。


Ballpark
這個行動召喚按鈕的型號有效的吸引了用戶的注意。它的清晰而直接的語言明確地告訴用戶執行行動之後的預期結果。


One Theme Per Month
這個行動召喚按鈕組將主要希望行動放到替代行動的中間。通過為主要期望行動添加一個非常醒目的顏色,以及一個較大的空間,它試圖將它的重要性放到次要行動的上面。


Scrapblog
你可以看到使用相對於周邊元素的鮮明的色彩、足夠的空間、以及型號的一些用戶注意的效果。簡單的語言傳遞一種很容易的感覺,生存你可以通過點擊立馬“開始(start)”。


13 Creative
這個行動召喚按鈕顯示如何通過使用一個非傳統的設計,你依然可以在周圍元素比較大的情況下吸引用戶的注意。


Kalculator
這個行動召喚按鈕明確的高速用戶:通過點擊這個行動召喚按鈕,他們可以只付$3.99。使用單詞”only”提示這是個相當不錯的交易,這顯然有利於銷售。


Web Design Beach
下面是一組使用兩種不同顏色的行動召喚按鈕。更醒目的那個,”get a quote”暗示它就是主要期待行動。


The Highland Fling
該行動召喚按鈕設法通過大量的空白、顯眼的位置和使用一個圖標以使自己顯眼以吸引註意力。通過使用單詞”now”,它傳遞了一種緊迫感和立馬行動的需求。


Commercial IQ
這個行動召喚按鈕的型號和項目位置吸引了用戶的注意。放大鏡圖標給行動添加了語境。添加“Free for search”文字消除了用戶關於行動的費用的顧慮。


dashboard
這裡,你可以看到使用高對比色彩的以使行動召喚按鈕脫穎而出的做法,儘管是在明顯較大的頁面元素中間。


行動召喚按鈕的附加資源
如果你想了解更多的關於行動召喚按鈕的信息,這裡是一些其它網站上的相關資源和文章:

如何在Photoshop中製作一個光滑而簡潔的按鈕
這個教程是在Six Revision,由我(Jacob Gube)編寫,將一步步向你展示如何製作大號的和能引起注意的行動召喚按鈕。


網頁設計中的靈感按鈕
如果你需要一些優秀按鈕設計的靈感,看一下這個Pattern Tap的收集吧。


有效的行動召喚按鈕的10種技術
Paul Boag討論一些關於製作良好的行動召喚按鈕的技術


良好的行動召喚按鈕
UX Booth關於“好的行動召喚按鈕的組成”方面有一篇好文章


Firefox展示一個強大的行動召喚按鈕是如何提升入口頁面的性能的
閱讀一下一個好的行動召喚按鈕如何提高轉換。你將發現一個Firefox、Opera和IE使用的行動召喚按鈕之間的對比。


網站設計趨勢:行動召喚按鈕(中文翻譯)
Lee Munroe將一系列的行動召喚按鈕放到一起,並附加了一個在當前設計趨勢方面的討論。


文章提供baystars design網頁設計公司

2009年11月3日 星期二

Firefox Bug: inline/inline-block的間隙

首先要說明的是,這個標題有點標題黨的意思,這個bug也存在於IE8下,在IE6和IE7下正常。之前寫過兩篇關於IE bug的文章,這里特意用了Firefox bug作為標題,是為了給自己找點心里安慰,省得總是埋怨IE :)。

關於inline-block,這個bug是“痛在遠方”同學碰到的,確實很詭異啊,貌似對標準支持越好的瀏覽器才會有這個問題。

如下圖:




在Firefox下,inline/inline-block的元素直接會有莫名的幾像素(貌似是6px)的空隙。這個bug比較難發現,因為為了美觀,一般的這種設計,inline/inline-block的元素直接都會有一定的間距,再加上目前的瀏覽器對inline-block這個屬性的支持並不是很好,這個屬性應用的也不是很頻繁。由inline-block來看,要對瀏覽器做不少hack,代碼量以及方便性上不如直接使用浮動。因此這個bug的影響其實不大。要解決這個bug,貌似目前沒有什麼好的方法,只能改變代碼的縮進,把換行去掉,整個代碼寫入一行。

文章提供baystars design網頁設計公司

2009年11月2日 星期一

1像素的dotted/dashed邊框

最近的一個頁面中碰到的,本來想用border來模擬設計圖的虛線效果,但是很明顯border效果不如設計圖來的好看。順便研究了下dashed和dotted的區別。

首先,從字面上來理解,dashed和dotted都是指“虛線”,他們的不同在於:

dashed:來自dash(破折號),由dash組成的虛線
dotted:來自dot (點),由dot組成的虛線,也稱點線

Bug1:在IE6下,1px寬的dotted表現的和dashed一樣。當寬度大於1px時,表現正常。

Bug2:在IE7下,當4條邊的寬度是1px和其它任意數值共存時,1px的dotted表現的和dashed一樣。 4條邊的寬度全為1px,或者為其它不是1px的不同值時不會出現這個bug。

Bug3:另外,IE6下,1px的dotted或者1px的dashed邊框,在拖動頁面時,有時候邊框會連成實線,有時候會出現缺口。

要解決這些bug,直接就不用dotted而直接用dashed;用圖片代替;用額外標籤和代碼來解決。

鑑於只有在邊框寬度為1px時才會出現這些bug,可以設置外包圍標籤的邊框寬度為2px,通過增加一個內標籤,設置其為1px的內容背景色邊框,再通過設置margin-top/right/ bottom/left: -1px;來蓋掉外包圍標籤的1px邊框,從視覺上實現正常效果。很囉嗦,很討厭,很無奈。

.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}

文章提供baystars design網頁設計公司