回首頁-企業、品牌網站設計與形象的深耕者
contact詢價信箱service@showbigs.idv.tw

Think big

Do big

Show big

網頁設計結構的重要性

一般人在網路上搜尋網站,三個主要的原因:(一)他們正在找某一樣東西或產品(二)他們在工作上試圖完成某項任務,必須蒐集相關資源或建議(三)他們離下一場會議前還有幾分鐘時間,想在你的網站上耗時間。
身為一位網站設計師,不管是前面上述的原因造就訪客拜訪您設計的網站,而您的工作任務就是設計出一種體驗,讓使用者能成功地滿足自身的需求,不管是要找最熱門的APP下載、印表機驅動程式、或者是學生要作主題的報告、又或者想要上網買點生活用品,當他們造訪您的網站時,網站的結構就會成為他們第一步探索的目標,也會自己在心中問自己以下這幾個問題:

(一)我在對的地方嗎?

探求事物時一般人第一直覺會想知道是否看到正確的地點,例如:顧客想買童裝,那麼當它鍵入你的網址或利用搜尋引擎找到你的網站之後,就會想知道是否真的抵達賣童裝的網站。 訪客來到你的網站時,最先看到的是組織架構,不管你喜不喜歡,組織架構都會先發揮這兩項功用:為使用者定向:它告訴訪客,這裡就是某某網站。告訴訪客要去哪裡,它讓你的訪客知道,這裡就是你可以探索/購買/觀看/閱讀/接觸/分享的東西。

如欲成功,組織架構必須能告知訪客所有的商品範圍,並讓顧客感到興趣待在你的網站裡。


(二)他們的網站有我正在找的東西嗎?

使用者對於自己位於正確的網站而感到滿意後,下一個問題是,他們把我要找的東西放在何處?他們很有可能會用你的導覽系統弄清楚要往哪裡去。 建築設計師將此稱為尋路,即那些可以讓我們弄清楚身處何處以及要去哪理的線索和提示。在網頁上,有四個尋路的關鍵元素必須謹記在心:

常見的組織系統:

即一般公共系統所見即所得的符號或小圖示在網路上統一視覺識別,讓您不加思索地朝著你想去的目標點下去就對了。

顯而易懂的標籤:

好標籤如此明白卻因此索然無味,好的標籤不會讓你停頓,也從不讓你思考,純粹是讓你點擊以抵達好東西的事物,如果看起來像是花不到兩秒就想出來的,大概就是正確的標籤。

看起來像導覽的導覽:

舉例來說,如果他是個連結,就必需讓它看起來像個連結,作成按鈕、畫底線、文字套上不同色彩,用來閱讀的文字和用來點擊的文字看起來應該要互不相同。

你現在在這裡和你剛剛在哪裡的標誌:

讓使用者清楚知道他們在網站中何處來,又要怎麼回去,網頁必需清楚講明上一頁與下一頁的連結。

另外,購物者在網站移動時,可能容易感到困惑,例如:剛剛那條綠色圍巾是在男裝?還是在季節穿著的冬裝呢?像這種情況,設計者就必須在產品頁裡將男裝與冬裝的標題特別在這個綠色圍巾產品頁突顯出來,可以是改變一下文字粗體和顏色標誌此位置,又或是在導欄列的標題區塊給予一個鮮明的顏色等,都是不錯的方法。以上,你的訪客將使用這四種方式,尋找能夠定向並弄懂下一步改點哪裡的元素。

(三)這不是我要的,但他們還會有更好或我想要找的東西嗎?

不管訪客是否在網站上找到要找的東西了,他們仍會一直自問:是否還有更好的?他們著眼之處,真的是他們想要的嗎?突顯使用者在網站中所在處,顯示附近相關分類的內容,是回答還有沒有更好的東西的好方法。例如:男裝、配件、圍巾,也讓他們知道相關的分類,例如:帽子和手套等。 另外也可以列出讓最新商品和前十大最受歡迎的商品都清楚地展現顧客能看到的畫面,就算你同時在找優於此刻所閱讀的產品,這也是不失推薦更好的商品的好方法之一。

(四)我現在該採取甚麼動作?

使用者找到喜歡的東西後,你應該提供下一個明顯動作的選項,問問自己訪客會想要如何處理他們找到的東西?下一步是甚麼? 線上購物網站相當直接了當:一般人想要購買最後找到的東西,加入購物車是頁面上最明顯的動作。但是如果你只是看看而已呢?那麼我們的動作就是要讓顧客可以是把該品項加到購物清單、願望清單,又或者利用買一送一的相關優惠價格促使顧客能動心。

那如果是閱讀新聞文章,選項就應包括評論、轉寄、列印報導、儲存連結、加入最愛清單…等。尋找電影時,那你可能就會再加入想看預告片、買票、評分、與朋友分享的選項…等。

如果網站能提供訪客很多東西,則當訪客到達網站時,網站的結構就必須盡快讓他們明白,不需再加以思索,另外盡量不要用網站上的豐富資源把訪客嚇跑,除非你經營的網站類型為大型入口型的網站,那就另當別論。身為一位設計者,我們應該要思考有多少分類應該首當其衝地告知顧客第一時間先接觸的資訊,並且成功暗示他們,當你再點選下一步時,就是你們需要的商品或資訊了。

然而網頁結構的設計很容易因為網頁呈現美觀的考量而犧牲可及性設計。有些網頁設計者可能因為考量網頁文字對齊和美觀,而採用表格和頁框做排版功能,如此一來網頁就可能具有許多無任何資訊意義的表格和頁框而混淆了特殊輸出入裝置的處理功能

因此在規劃網頁結構和呈現時應同時考量可及性的因素,適當的使用網頁的結構標籤,忠實地利用結構和呈現標籤原先設定的功能,毋貪一時的便利或美觀而混用不當的標籤才是。

#網頁設計精選案例:More
網頁設計精選作品

晶麗科技.極光電通

網頁設計精選作品

深耕30年.建明印刷

網頁設計精選作品

藏在台灣巷弄裡的風雅小世界

網頁設計精選作品

ALV國際美國村

網頁設計精選作品

Green World 綠世界環保

網頁設計精選作品

將財吊扇

網頁設計精選作品

白金歲月-咱ㄟ台灣.咱ㄟ鹽

網頁設計精選作品

漢服文化推廣協會

網頁設計精選作品

犯罪被害人保護協會

網頁設計精選作品

BLTV佛教人間衛視電視平台

網頁設計精選作品

南投鹿谷鄉茶業文化館

網頁設計精選作品

道濟製藥-專業環境檢測

網頁設計精選作品

百世科研PesiBike

網頁設計精選作品

arin醫美藥妝

網頁設計精選作品

八十餘年歷史-台中追分火車站

網頁設計精選作品

樂學教育網