Understanding the basic of UX and UI design for website development

When ClipCube Media develops a website for a customer, the planning stage is crucial for a successful project. Understanding the company's business, brand and positioning, target market and how they want to approach with their audience is fundamental in developing a User Interface (UI) which projects a User Experience (UX) which emotionally engages the audience to follow a path to view further pages and take action.


What is UX?

UX, which stands for user experience, is the process of researching, developing, and refining all aspects of a user’s interaction with a company to ensure the company is meeting the user’s needs. A UX designer must ensure people find value when they interact with a company’s products or services.


What is UI?

a UI designer is responsible for the presentation of a product. A UI designer’s responsibilities are more about cosmetic than a UX designer’s. But that doesn’t mean a UI designer just picks some pictures and a logo and calls it a day.

A UI designer is responsible for how everything on a page aligns in relation to each other. The visual elements you see on a page, such as buttons and icons, and the interactivity of a product, falls on the UI designer.


How does this help me?

The breaking up of these 2 design elements allow us to ensure the correct information is communicated in a way which the user will be positively engaged. Positive being the key word.


Some elements that provide good UX for your website.


  • Ensure your website is optimised

Though this is a standard feature, many old sites are not optimised to adapt to different screen sizes whether PC, mobile or tablet. This is known as a responsive design, and must be tested across different platforms and screen sizes.


  • Make your site easy to navigate

A user-friendly website will try to achieve time-saving designs. Users typically visit the website with specific intention and want to find what they are looking for as soon as possible. This can be done by providing easy to use design and logical navigational flow.


Simplify the design and make a concise and clear path of layout. Focus on enabling users to do one action at a time on each point of the site. It should recognizes what users need and efficiently navigate them. If your website has a lot of information, try to make your site displaying only the most relevant information and make it visible only when users need to. This will ensure users won’t be bombarded by those information and distracted from their goal by irrelevant content.


  • Highlight relevant content

Gone for the unnecessary distractions and clickbaits, instead recent trends concentrate more on spotlighting relevant content for users. The goal of content-oriented user experience is to ensure nothing will prevent users from seeing the website’s content. To do this, you have to visually adjust the design to help users concentrate on your message.


Organizing the visual order precision to highlight contents and put them in order what you want your users to see first. You can eliminate irrelevant details in the content which help users focus more on important information creating a more concise experience. You can try using different colors for Call To Action links, connect to related information via anchor links and engage users via interactive features. Make sure to utilize blank space between content for breathing room and make the design more simplistic and easy to navigate.


Video content is needed to create a minimum user experience. People tend to spend more time watching video than reading. Video content communicates more efficiently, especially when you are explaining something more complex (try Explainer videos) and less time. Keep in mind the upcoming vertical video trend, users spend more time on mobile phone than laptop or desktop, so considering doing vertical orientation video.

Keep in mind that Youtube is the second biggest search engine on the Internet so when you produce a video, promote it


How UX affects SEO

Google and other search engines want to provide the best search result for each search entry. The best search result for in Google’s terms, is not necessarily the best or most accurate result, but also the best experience. They take into consider many factor like whether your website has been optimized, page loading speed and security.Google also uses users behaviour to know how they experience your website. It remembers the pattern of user behavior on your website. For example; Google remembers if the users leave your site quickly, or spend more time on your site.


Google take these factors into consideration

These factors affects how you perform in ranking search result page. You can improve these factors of your site to rank higher on search engine, however we suggest that you focus more on perspective of users


  • Site speed

Site speed affects how user feel about your site, it's like a first impression. You can still get decent rankings with average page speed, but it's been proven time to time that the better your site speed is, the better your ranking will be. Try optimizing images, compressing code, loading less external scripts, widgets. Your website host can be factor as well, cheap service offer can damage your site speed. Consider the host with quality service, it will cost more but worth it in the long run.


  • Site security

A website with SSL secured outrank another site without it. If your site isn't secured, users will see a warning in their browser before they enter any information which is the potential of losing visitor's trust. See our blog on SSL security.


  • Mobile-friendliness

Users tend to use mobile device more than desktop to access the internet nowadays, having your website optimized for mobile users is part of improving UX. Mobile-friendly websites get a ranking boost on Google, it does even state in search engine result page as well whether certain site is mobile-friendly or not.


  • Your site structure 

​Having a clear site structure leads to better understanding better understanding of the site by Google, and easier for users to navigate through it. As your site grows, it'll get cluttered. Your site products or contents will grow more and more eventually. We suggest having a routinely maintenance to get into site structure and improve upon it as it has huge impact on User Experience.It's crucial for SEO to evaluate and improve internal and external linking on a regular basis, and make sure Google understand relationship and relevance of those pages.


  • Linking of your pages both internal and external

​It's crucial for SEO to evaluate and improve internal and external linking on a regular basis, and make sure Google understand relationship and relevance of those pages. It is also good for users to seek for more information within the page by navigate through those links.


ClipCube Media provides website development services from our Bangkok offices. If you would like to discuss your website needs,

please contact us.


ทุกครั้งที่เราพัฒนาเว็บไซต์ให้ลูกค้า ช่วงของการวางแผนพัฒนานั้นเป็นช่วงที่สำคัญที่ทำให้โปรเจ็กต์ประสบความสำเร็จได้ การเข้าใจในธุรกิจแบรนด์ของตนเอง, ตำแหน่งทางการตลาด, กลุ่มเป้าหมาย และวิธีการเข้าหากลุ่มเป้าหมายนั้นๆ เป็นรากฐานของการทำ UI (User Interface) และส่งผลให้กลุ่มผู้ใช้เป้าหมายได้ประสบการณ์ที่ดีในการใช้งานเว็บไซต์ และยังส่งผลให้มีแนวโน้มในการเปลี่ยนเป็นลูกค้าอีกด้วย


แล้ว UX คืออะไรล่ะ?



UX หรือชื่อเต็มคือ User Experience คือประสบการณ์และความพึงพอใจของลูกค้าเมื่อใช้งานผลิตภัณฑ์หรือบริการ โดยในที่นี้เราใช้คำว่า UX นี้ในเรื่องของการทำเว็บ


ดังนั้น การดีไซน์ UX ก็คือ การค้นคว้า และพัฒนาเว็บไซต์ให้ตอบสนองการใช้งานและความต้องการของกลุ่มผู้ใช้เป้าหมายให้มากที่สุดนั่นเอง


แล้ว UI ล่ะ คืออะไร?


UI หรือชื่อเต็มคือ User Interface เป็นหน้าต่างแสดงเมนูต่างๆบนเว็บไซต์ หรือที่เรียกว่ารูปแบบ Layout เป็นตัวสื่อกลางที่ทำให้ผู้ใช้ปฎิสัมพันธ์กับเว็บไซต์ เช่น ปุ่มกด, ไอคอน, รูปภาพผลิตภัณฑ์ต่างๆ, ฯลฯ


ซึ่ง UI นี้มีผลต่อประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้โดยตรง ดังนั้น UI ก็คือส่วนหนึ่งของ UX นั่นเอง




การโฟกัสทั้งสองส่วนนี้จะช่วยให้มั่นใจได้ว่าข้อมูลที่ต้องการที่จะสื่อไปยังผู้ใช้ทั้งหมด ได้ถูกแสดงออกไปให้เห็นอย่างถูกต้องและเป็นผลดีต่อผู้ใช้มากที่สุด


การมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับผู้ใช้เป้าหมาย มีโอกาสเปลี่ยนให้ผู้ใช้งานมาอุดหนุนบริการและผลิตภัณฑ์แบรนด์ของคุณอีกด้วย เนื่องจากกลุ่มผู้ใช้เหล่านี้พอใจในการใช้งานและเพลิดเพลินจากการท่องเว็บของคุณ




  • ปรับให้เว็บรองรับการใช้งานของอุปกรณ์อื่นๆ


หรือ Responsive Design ถือว่าเป็นฟีเจอร์หลักๆที่ทุกเว็บไซต์ควรจะมีกันหมดแล้ว จะสังเกตได้ว่าเว็บไซต์เก่าๆ จะไม่รองรับการดูผ่านมือถือ หรือ แท็บเล็ต ซึ่งเรื่องนี้สำคัญมากๆ เนื่องจากผู้ใช้งานหันไปใช้อุปกรณ์พกพาเช่นโทรศัพท์มือถือ สมาร์ทโฟน และแท็บเล็ตในการเข้าอินเตอร์เน็ตกันมากขึ้น การพัฒนาเว็บไซต์จึงควรทดสอบกับหน้าจอเหล่านี้เพื่อปรับให้รองรับความเข้ากัน


  • การไฮไลท์เนื้อหาสำคัญ


ทุกวันนี้การใช้หัวเรื่องหลอกคลิก (clickbaits) หรือคนเทนต์ดึงความสนใจที่ไม่จำเป็นอื่นๆไม่มีอีกแล้ว เทรนด์ทุกวันนี้ให้ความสำคัญกับการไฮไลท์เนื้อหาสำคัญเพื่อไม่ให้มีอะไรมาขัดขวางผู้ใช้งานจากการดูเนื้อหาคอนเทนต์ที่ต้องการได้ การไฮไลท์เนื้อหาสามารถทำได้โดยการจัดการเนื้อหาให้ดูอ่านง่ายและจัดการไฮไลท์เนื้อหาสำคัญด้วยสีหรือขนาด ฯลฯ เว้นช่องไฟเพื่อความสะดวกในการอ่านและเป็นช่องว่างให้ดีไซน์ดูเรียบง่ายอีกด้วย


วีดีโอคอนเทนต์เรียกได้เป็นเนื้อหาพื้นฐานของ UX เลย ผู้ใช้ส่วนใหญ่ใช้เวลาในการดูวีดีโอมากกว่าการอ่าน วีดีโอคอนเทนต์จึงสื่อสารถึงผู้ใช้ได้ดีกว่าเป็นพิเศษ โดยเฉพาะการอธิบายบางสิ่งที่ค่อนข้างซับซ้อนในเวลาสั้นๆ (ตัวช่วยคือ Explainer Video) โดยเทรนด์วีดีโอคอนเทนต์ตอนนี้คงต้องจับตามองวีดีโอในแบบแนวตั้ง เนื่องจากการใช้งานมือถือที่มากขึ้น (และ IGTV) แต่อย่างไรก็ตาม Youtube ยังถือเป็น search engine ตัวที่สองบนอินเตอร์เน็ตอยู่ เพราะฉะนั้นเวลาทำวีดีโอต้องโปรโมทเสมอ


UX ยังส่งผลต่อ SEO อีกด้วย


Google และ search engine ตัวอื่นๆ ต้องการจะแสดงผลการค้นหาที่ดีที่สุดสำหรับผู้ใช้จากการค้นหาแต่ละครั้งเป็นทุนเดิมอยู่แล้ว และ Google ยังนับเจ้า UX นี้เป็นอีกปัจจัยหนึ่งอีกด้วย โดย Google มองหาปัจจัยการรองรับแสดงผลกับอุปกรณ์อื่นๆ, ความเร็วในการโหลด, ความปลอดภัยของเว็บ โดยจะจำพฤติกรรมการอยู่บนเว็บหนึ่งของผู้ใช้และตัดสินจากการดูว่า ผู้ใช้ใช้เวลาบนเว็บไซต์นั้นนานขนาดไหน


โดย Google มองจากปัจจัยเหล่านี้


  • ความเร็วของเว็บไซต์

ความเร็วมีผลกับความรู้สึกผู้ใช้เป็นอย่างมาก เหมือนกับ first impression ถ้าหน้าโฮมเพจของคุณโหลดช้าก็คงไม่มีใครชอบนัก โดยสามารถปรับความเร็วไซต์ด้วยการ ลดขนาดรูป, ใช้โค้ดหรือวิดเจ็ตภายนอกให้น้อยลง ผู้ที่โฮสต์เว็บไซต์คุณก็มีส่วนเกี่ยวข้องกับความเร็วเช่นกัน เลือกผู้ให้บริการที่มีคุณภาพช่วยให้เว็บไซต์ความเร็วเพิ่มขึ้นได้


  • ความปลอดภัยบันเว็บไซต์

เว็บไซต์ที่มี SSL จะโชว์ขึ้นในเบราเซอร์เลยว่าเว็บนี้ปลอดภัย ซึ่งการมีเจ้า SSL นี้ทำให้เพิ่มอันดับ ranking ของ Google ได้และยังปลอดภัยกับข้อมูลของผู้ใช้เองด้วย


  • รองรับอุปกรณ์อื่นๆ

การปรับให้เว็บไซต์แสดงผลให้เข้ากับอุปกรณ์อีดลคโทรนิคพกพายุคปัจจุบัน ไม่ว่าจะเป็น มือถือสมาร์ทโฟน หรือ แทบเล็ต เป็นสิ่งที่ควรทำสำหรับทุกเว็บไซต์ในปัจจุบัน


  • โครงสร้างของเว็บไซต์เอง

การที่เว็บไซต์ของคุณมีโครงสร้างที่ชัดเจน มีที่มาที่ไปที่ชัดเจน ช่วยให้ Google สามารถจัดอันดับได้ นอกจากนั้นผู้ใช้ยังสามารถเข้าใจเส้นทางของเว็บไซต์ได้ ช่วยให้การทำงานราบรื่นยิ่งขึ้นอีกด้วย การมีโครงสร้างที่เรียบง่ายและไม่ซับซ้อนยังช่วยให้เว็บไซต์มีความเร็วเพิ่มขึ้นอีกเท่าตัว


  • การเชื่อมลิงก์ทั้งภายในและภายนอกของเว็บ

​นอกจากจะช่วยเพิ่มค่า SEO ของเว็บแล้ว ยังช่วยให้ผู้ใช้สามารถกดลิงก์ที่ให้เพื่อหาข้อมูลเพิ่มเติมได้ ไม่ว่าจะภายในเว็บหรือแม้แต่ไปยังเว็บไซต์อื่นๆได้อีกด้วย

ClipCube Media ให้บริการด้านการพัฒนาเว็บไซต์ทุกประเภท มีเว็บไซต์โปรเจ็กต์ที่ต้องการให้เราช่วยเหลือ