下面是如何設計更好用的web應用程序的10個建議!

技巧1:注意選項卡

選項卡在內容組織上具有很好的視覺表達概念。 其功能直觀,每個人都知道如何使用它們。 不幸的是,選項卡允許偷懶的設計師讓表單失控,變得混亂無序。
不要使用選項卡來處理過于復雜的表單。 把精力放在降低過于復雜的表單上。 如果全放在在單個頁面會變得太雜亂,請把它們分解成一個向導。

技巧2:讓保存行為一致

不要將自動提交和手動保存行為混雜在一起。 如果有save按鈕,用戶將不再信任自動提交的行為。 同樣的道理,在其他類型的輸入時他們可能認為自動提交會處理，從而忽視save按鈕。 不管你選擇哪種方法,堅持下去,保證一致性。

技巧3:考慮刪除按鈕的位置

除非用戶需要頻繁地刪除東西,否則你應該在表單中把刪除按鈕放到一個次要的地方。 在搜索結果中提供刪除按鈕可能增加不必要的復雜性,從而過多地強調了可能不希望用戶頻繁地使用的行為。

技巧4:總是提供輸入域的標簽

在web應用中使用空白提示符而不是輸入框標簽已成為一個流行趨勢,因為應用看起來很簡潔清晰。 不幸的是當用戶輸入一些內容后,空白提示消失了,用戶想知道哪個輸入框是什么數據怎么辦呢?
浮動標簽已經成為一種新流行的解決方案,在區分用戶占位符的簡潔和使用固定的標簽之間。

技巧5:當有新需求時做出正確的調研

大多數用戶并不知道如何設計軟件,但他們經常對軟件設計提出要求。 詢問他們需要一個新東西的原因,理解他們真正想要的完成的是什么。 為潛在的需求提供一個更好的解決方案，而不是盲目地交付新功能。

技巧6: 平衡界面直觀性與效率

當用戶首次使用您的應用時,他們需要盡量快速地上手。 用戶永遠不會查閱文檔,在大多數情況下也不會得到任何培訓。 也就是說,隨著時間的推移,用戶將從努力學習如何使用 轉變到 需要非常高效地在一天八個小時內用它完成工作。
讓應用容易上手并保持屏幕簡潔,與高效快捷的使用之間有一種微妙的平衡。

技巧7:保存后會發生什么?

總是考慮用戶在單擊保存并提交后會發生什么。 結果必須是一致的,用戶需要在某個位置知道響應信息。 如果您的應用程序有典型的search-edit-save概念,正確的做法是顯示在搜索結果頁面,因為他們可能正準備繼續列表中的下一項。
如果用戶已經在一個向導界面中完成多個步驟的過程,則需要一個完成頁面顯示保存了什么東西,并提供下一步可選的選項。 在向導的確認頁面上如果沒有下一步行動或建議可能會使新用戶感到困惑。

技巧8:當前所處位置?

在一個較大的web應用中,可能有幾十甚至上百個界面。 用戶總是需要有個一致的方式知道他們處于應用程序的那個位置以及當前正在編輯什么東西。 這可以通過導航條來高亮顯示顯示用戶在應用程序的哪個位置。
您還可以面包屑導航來描述用戶在應用程序中位置。 Breadcrumbs(面包屑導航)還可以顯示用戶選定的每個地方,可以單擊其中一個回到他們上次瀏覽的界面。

技巧9:不要糾結于滾動條

在桌面應用程序時代的典型UI設計是適配屏幕,沒有滾動條。 在web應用中垂直滾動條并不是一件壞事,只要它可見并且清晰地顯示。 當用戶點擊表單選項卡,根據瀏覽器的行為,甚至會自動滾動到適當的位置。

技巧10:不要害怕空白

有一種自然傾向,試圖填滿一切。 隨著需求的增長,開發人員將越來越多的功能硬塞進一個有限的空間。 剩下的是一個過于復雜的應用程序,看起來相當復雜和混亂。 留下適量的空白可以讓您的應用程序看起來簡單,平易近人。

結論

用戶對應用好壞的評判標準更多在于界面而不是功能。 如果用戶認為應用程序易于使用,使他們感覺很好那就會使用您的應用程序,否則即便功能再強大也難以得到好評。 在設計你的下一個web應用程序時記住這十條提示,用戶會感激你的!
關于作者:
大衛·塔爾博特(David Talbot),當前就任EverBank首席架構師。 擁有軟件行業超過15年的從業經驗和構建豐富的UI web應用程序的專業經驗。 同時也是Applied ADO.NET以及大量技術文章的作者。 郵件地址是 david@legendarycode.com