12 เคล็ดลับการออกแบบ UI บนมือถือและเว็บแอปที่ไม่มีใครบอกคุณ – จนถึงตอนนี้
เผยแพร่แล้ว: 2016-02-28[ Proto .io เป็นเครื่องมือสร้างต้นแบบแอปบนอุปกรณ์เคลื่อนที่ที่ใช้โดยผู้ประกอบการและสตาร์ทอัพเพื่อสร้างต้นแบบเสมือนจริงแบบโต้ตอบเต็มรูปแบบซึ่งมีรูปลักษณ์และให้ความรู้สึกเหมือนแอปจริง]
เราถามนักออกแบบ UI นักพัฒนา และผู้ประกอบการ 7 คนว่าพวกเขาเรียนรู้เคล็ดลับการออกแบบ UI ของ UI บนมือถือและเว็บแอปอย่างไร หรือเกิดขึ้นตลอดเส้นทางอาชีพของพวกเขา ไม่มีใครเคยบอกพวกเขาเกี่ยวกับเคล็ดลับเหล่านี้หรือดูเหมือนไม่มีใครรู้เกี่ยวกับปัญหาเมื่อพวกเขาพูดถึงพวกเขา ต่อไปนี้คือ 12 สิ่งที่คุณไม่จำเป็นต้องเรียนรู้ผ่านการลองผิดลองถูก เว้นแต่คุณมีอยู่แล้ว!
เคล็ดลับการออกแบบ 3 อันดับแรกจาก Duffy
John Geletka เป็นรองประธานบริหารฝ่ายกลยุทธ์ดิจิทัลของ Duffy (@duffydesignx) ซึ่งเป็นหน่วยงานที่มีประสบการณ์ด้านการออกแบบมากกว่า 30 ปี ต่อไปนี้คือกลอุบายบางอย่างที่เขาได้รับในช่วงหลายปีที่ผ่านมา
สองสามารถเป็นตัวเลขมหัศจรรย์
“ด้วยการออกแบบที่ตอบสนองได้ทันใจ ออกแบบสองหน้าจอพร้อมกันเสมอ: ภาพบุคคลบนมือถือ (320px) และเดสก์ท็อป (1200px) มันทำให้กระบวนการเร็วขึ้นมาก” Geletka กล่าว
เริ่มต้นด้วยการออกแบบกระดูกเปล่า
“ลดคุณสมบัติ เสียงระฆัง และนกหวีดทั้งหมดในตอนแรก กำจัดขยะให้หมดไปและมุ่งไปที่เป้าหมายของแอป” Geletka กล่าว “นั่นหมายความว่าอย่าเพิ่มการแชร์ การประหยัด และการผสานรวมเข้ากับการออกแบบของคุณในตอนแรก ตรวจสอบให้แน่ใจว่าคุณได้นำแนวคิดหลักลงมา”
อย่ากลัวที่จะหยิบปากกาขึ้นมา
“เครื่องมือดิจิทัลนั้นยอดเยี่ยม แต่บางครั้งคุณสามารถทำงานบนกระดาษได้มากขึ้นใน 10 นาที” Geletka กล่าว “หากคุณติดขัดหรือตรงต่อเวลา ให้ใช้กระดาษ”
บรรลุความสมดุลด้วยเคล็ดลับการออกแบบ UI ของเว็บแอปนี้
Brandon Termini เป็นผู้ก่อตั้งและครีเอทีฟไดเร็กเตอร์ของ Handsome (@HandsomeMade) ซึ่งเป็นหน่วยงานที่มุ่งมั่นที่จะสร้างการออกแบบ UI เว็บแอปและผลิตภัณฑ์ดิจิทัลที่ "สวยงามและน่าพึงพอใจ"
ใช้น้ำหนักออปติคัลที่ถูกต้อง
“ความสมดุลมีความสำคัญอย่างมากเมื่อสร้างอินเทอร์เฟซที่ประสบความสำเร็จ ความสมดุลที่ดีช่วยให้ผู้ใช้ของคุณสามารถสแกนแอปของคุณในแบบที่คุณต้องการได้อย่างง่ายดาย” เทอร์มินีกล่าว “ฉันเห็นกฎนี้ถูกละเมิดบ่อยที่สุดเมื่อใช้ไอคอนต่างๆ ในอินเทอร์เฟซ ไอคอนบางอันมีน้ำหนักในแนวนอนมากกว่า ในขณะที่ไอคอนอื่นๆ มีแนวตั้งมากกว่า และเป็นหน้าที่ของเราที่จะต้องแน่ใจว่าเมื่อประกอบเข้าด้วยกันแล้ว ไอคอนเหล่านั้นจะรู้สึกสมดุลเท่ากัน”
น้ำหนักออปติคอลและปุ่มเล่น
“หากคุณกำลังออกแบบปุ่มเล่น คำตอบคือไม่ต้องวางสามเหลี่ยมด้านเท่าในแนวนอนและแนวตั้งตรงกลางวงกลม แน่นอนว่าทางเรขาคณิตจะอยู่กึ่งกลาง แต่รูปสามเหลี่ยมทางซ้ายจะรู้สึกหนักกว่าทางสายตาเนื่องจากมีความสูงมากกว่า” เทอร์มินีกล่าว “อย่ากังวล คุณสามารถทำสองสิ่งเพื่อแก้ไขปัญหานี้: เลื่อนสามเหลี่ยมไปทางซ้ายเล็กน้อยเพื่อหลอกตาให้มองเห็นจุดศูนย์กลาง หรือลดความกว้างของสามเหลี่ยมลงเล็กน้อยเพื่อให้ทุกด้านปรากฏเท่ากัน”
จากการออกแบบ UI ของเว็บแอปไปจนถึงมือถือ
เทคนิคการออกแบบ UI แอพมือถือและเว็บแอพถัดไปของเรามาจาก Christian Dodd รองประธานและผู้อำนวยการด้านกลยุทธ์ประสบการณ์ผู้ใช้ และ Nathan Koch ผู้อำนวยการฝ่ายเทคโนโลยีสร้างสรรค์ของ Cramer-Krasselt (@cramerkrasselt) Cramer-Kasselt เป็นเอเจนซี่โฆษณาอิสระที่ใหญ่เป็นอันดับสองในสหรัฐอเมริกา โดยมีลูกค้าเช่น Porsche, Corona Extra และ Heinz ดังนั้น Dodd และ Koch จึงดึงเอาประสบการณ์ที่สั่งสมมามากมายเพื่อให้คำแนะนำนี้แก่เรา:
อย่าลืมการโต้ตอบของโฮเวอร์เว็บเมื่อย้ายไปยังมือถือ และมีแผนที่ชัดเจนในการจัดการกับสิ่งเหล่านี้ตั้งแต่เนิ่นๆ ของการออกแบบ
“เนื้อหาที่ซ่อนอยู่เบื้องหลังสถานะโฮเวอร์บนเดสก์ท็อปสามารถจัดการได้หลายวิธีบนมือถือ: โดยตรงบนเพจ และการซ่อนหลังการสัมผัส ไม่มีวิธีแก้ปัญหาใดในการจัดการกับเหตุการณ์โฮเวอร์เดสก์ท็อปที่ทำงานได้ในทุกกรณี” Dodd และ Koch กล่าว “เนื้อหาอธิบาย/อรรถประโยชน์มักจะได้ประโยชน์จากการถูกลอยขึ้นไปแสดงบนหน้า และเนื้อหาเชิงสำรวจมักจะเหมาะสมกว่าเมื่อต้องสัมผัส โดยทั่วไป เมื่อผู้ใช้เลื่อนดูอุปกรณ์ทั้งหมดได้สบายขึ้น การซ่อนเนื้อหาหลังสถานะโฮเวอร์และซ่อน/แสดงวิดเจ็ตจึงมีความจำเป็นน้อยลงเรื่อยๆ
แนะนำสำหรับคุณ:
บทบัญญัติต่อต้านการแสวงหากำไรสำหรับสตาร์ทอัพในอินเดียมีความหมายอย่างไร?
Edtech Startups ช่วยให้แรงงานอินเดียเพิ่มพูนทักษะและเตรียมพร้อมสู่อนาคตได้อย่างไร...
หุ้นเทคโนโลยียุคใหม่ในสัปดาห์นี้: ปัญหาของ Zomato ยังคงดำเนินต่อไป, EaseMyTrip Posts Stro...
สตาร์ทอัพอินเดียใช้ทางลัดในการไล่ล่าหาทุน
แพลตฟอร์มการตลาดดิจิทัล Logicserve ระดมทุน INR 80 Cr รีแบรนด์เป็น LS Dig...
รายงานเตือนให้มีการพิจารณาทบทวนกฎข้อบังคับเกี่ยวกับ Lendingtech Space
การพยายามทำให้วิดีโอเล่นอัตโนมัติทำงานบนเว็บบนมือถือมักจะไม่คุ้มค่า
“นักพัฒนาระบบปฏิบัติการมือถือไม่อนุญาตให้เล่นวิดีโออัตโนมัติด้วยเหตุผล โดยทั่วไปแล้ว เสียงและวิดีโอจะรบกวนผู้ใช้บนอุปกรณ์เคลื่อนที่มากกว่า” Dodd และ Koch กล่าว “ผู้ใช้มือถือคุ้นเคยกับการตัดสินใจเลือกบริโภคสื่ออย่างรอบคอบ”
การออกแบบที่ตอบสนองได้ดีกว่าแค่ย่อขนาดเบราว์เซอร์ของคุณให้เล็กลง
“การตรวจจับคุณสมบัติเป็นส่วนสำคัญของการพัฒนาเว็บบนมือถือเช่นกัน” Dodd และ Koch กล่าว “อย่าคิดว่าคุณไม่สามารถคาดเดาเหตุการณ์ที่เกิดขึ้นบนเว็บไซต์เดสก์ท็อปได้ รายละเอียดของปฏิสัมพันธ์บนมือถือนั้นซับซ้อนกว่าที่คิด”
กฎสามข้อมีอะไรมากกว่าที่คุณคิด
Karolyn Hart เป็นประธานเจ้าหน้าที่ฝ่ายปฏิบัติการของ InspireHUB (@Inspire_HUB) และเป็นผู้สร้าง IHUBApp ซึ่งเป็นหนึ่งในเว็บแอปมือถือระดับองค์กรที่เก่าแก่ที่สุดในตลาด
พยายามเก็บองค์ประกอบการออกแบบ UI ของเว็บแอปทั้งหมดไว้ในกลุ่มละ 3 กลุ่ม
“เราสะดุดข้าม 'กฎสามข้อ' ในขณะที่เราค้นคว้าวิธีสร้างความมั่นใจในอินเทอร์เฟซสำหรับลูกค้าของเรา เวอร์ชัน 1.0 ของแพลตฟอร์มของเราไม่ได้ถูกทำเครื่องหมาย” Hart กล่าว “การวิจัยแสดงให้เห็นว่าสามเป็นตัวเลขที่เหมาะสมที่สุดที่เพิ่มความมั่นใจ น้อยกว่าสามคนและผู้คนรู้สึกไม่มั่นใจ มากกว่าสามคนและพวกเขารู้สึกท่วมท้น”
“ดังนั้นเราจึงสร้างความท้าทาย UX ที่ทุกอย่างจะต้องนำเสนอเป็นสามส่วน” Hart กล่าว “ตั้งแต่การตัดสินใจไปจนถึงขั้นตอนที่ลูกค้าของเราเติมแอพของพวกเขา กฎได้เปลี่ยนเครื่องมือของเรา แบ็คเอนด์ของเรามีความซับซ้อนอย่างยิ่งในการรองรับความเรียบง่ายของการออกแบบ แต่ผลตอบแทนก็คุ้มค่า!”
การใช้ท่าทางสัมผัสที่เรียบง่ายและใช้งานง่าย
Jason Suriano เป็นผู้ก่อตั้งและซีอีโอของ Rocketfuel Productions Inc. (@TrajectoryIQ) ด้วยประสบการณ์กว่า 13 ปีในการออกแบบ UI ของแอพมือถือและเว็บแอพ และหลังจากสร้างโปรเจ็กต์ออนไลน์และอุปกรณ์พกพาสำหรับบริษัทต่างๆ เช่น Discovery Communications Suriano ได้หยิบคำแนะนำสำหรับมืออาชีพมาบ้างแล้ว นี่คือสิ่งที่เขาชอบ:
บนมือถือ ถือว่านิ้วทั้งหมดเงอะงะ
“เคล็ดลับอย่างหนึ่งที่เรานำมาใช้ในการออกแบบเกมมือถือคือการทำให้หน้าจอเริ่มต้นทั้งหมดเป็นพื้นที่ที่แตะได้ สิ่งนี้หมายความว่าหากผู้ใช้แตะปุ่มเริ่มต้นแล้วพลาด แอปจะยังคงโหลดหน้าจอการเล่นเกมที่ตามมา เพื่อให้แน่ใจว่าผู้ใช้จะดำเนินการต่อในแอป” Suriano กล่าว
“เนื่องจาก UI/UX บนมือถือถูกกำหนดโดยการแตะ การแตะสองครั้ง การปัดนิ้ว และการใช้ท่าทางสัมผัส การออกแบบที่ผิดพลาดอย่างตรงไปตรงมา เช่น หน้าจอเริ่มต้น อาจทำให้ผู้ใช้ของคุณติดขัดหรือหงุดหงิด บังคับให้พวกเขากดปุ่มโฮมและออกจากแอพ” เขากล่าวเสริม .
เปิดใจรับเคล็ดลับการออกแบบ UI ของเว็บแอปใหม่
Nolan Kier และเป็นผู้จัดการโครงการและผู้ร่วมพัฒนาธุรกิจที่ Messapps (@Messapps) ซึ่งเป็นบริษัทพัฒนาแอปที่มีสำนักงานใหญ่ในนิวยอร์ค “แม้จะก่อตั้งขึ้นเมื่อไม่ถึงสามปีที่แล้ว แต่ Messapps ได้เติบโตอย่างรวดเร็วจนเป็นหนึ่งในบริษัทพัฒนาแอพที่มีชื่อเสียงและมีนวัตกรรมมากที่สุดในด้านการพัฒนาแอพ” Kier กล่าว “และเราได้เรียนรู้ UI ของเว็บแอพมากมาย เทคนิคการออกแบบในช่วงสามปีสั้นๆ นั้น”
ค้นคว้าหาวิธีการใหม่ๆ ที่ดีกว่าในการทำงานให้สำเร็จ
“ลูกเล่นหรือวิธีการใหม่ๆ มากมายในการทำงานให้สำเร็จ เราได้เรียนรู้ผ่านการค้นคว้าปัญหาหรือโดยการเจาะลึกเข้าไปในปัญหาการพัฒนาโดยเฉพาะเพื่อพิจารณาว่าคำตอบใดที่อาจถูกล้อเลียนได้” Kier กล่าว “ตัวอย่างของสิ่งนี้ ได้แก่ การเรียนรู้ที่จะเขียนเอกสารเจ๋งๆ โดยการเขียนโค้ดใหม่ลงใน LaTeX ซึ่งคล้ายกับโปรแกรมแก้ไขข้อความที่มีรูปแบบ/รูปแบบการเขียนโปรแกรม นอกจากนี้ Mathematica ซึ่งเหมือนกับ Mathcad สำหรับ MacOS ก็มีฟีเจอร์ที่ซ่อนไว้อย่างดี ซึ่งอนุญาตให้ผู้ใช้สร้างโครงร่าง 3 มิติที่ยากโดยใช้ซอฟต์แวร์”
"สำหรับการออกแบบ การสะดุดกับวิธีบีบอัดเฟรมโดยใช้สิ่งต่างๆ เช่น การปรับเปลี่ยนช่องอัลฟาและความสามารถในการบีบอัดภาพแต่ละภาพโดยใช้อัลกอริธึมที่กำหนดเองนั้นเป็นกลอุบายเล็กๆ น้อยๆ ที่ช่วยในกระบวนการ" Kierk กล่าว “การอยู่ในธุรกิจการออกแบบและพัฒนา UI ของเว็บแอปนั้นต้องการนวัตกรรมที่สอดคล้องกับวิวัฒนาการของเทคโนโลยี ด้วยเหตุนี้ นักออกแบบและนักพัฒนาของเราจึงปรับปรุงกระบวนการภายในและภายนอกของเราอย่างต่อเนื่องเพื่อ “สร้างสรรค์วงล้อใหม่” และค้นพบวิธีใหม่ๆ ในการออกแบบและพัฒนา”
หาคนที่ใช่ในการทำงานด้วย
Robert Pieta เป็นวิศวกร iOS และ CEO ของ Porter Key (@PorterKeyboard) ซึ่งเป็นแป้นพิมพ์ iOS อัจฉริยะที่ให้คำแนะนำตามบริบท นี่คือคำแนะนำที่ยิ่งใหญ่ที่สุดของเขาในฐานะทั้งวิศวกรและผู้ประกอบการ:
ค้นหานักออกแบบนักพัฒนาหรือนักพัฒนานักออกแบบ
"คนที่เข้าใจและมีประสบการณ์อาวุโสจากทั้งสองฝ่ายจะช่วยแก้ไขปัญหาด้านการสื่อสารและช่วยให้โครงการเป็นไปตามกำหนดเวลา" Pieta กล่าว “มีประโยชน์หลักสองประการในเรื่องนี้ ประการแรก ผู้ที่มีประสบการณ์ด้านการออกแบบและการพัฒนาสามารถช่วยลดช่องว่างในการสื่อสารได้ ทั้งการออกแบบและการพัฒนามีคำศัพท์หลัก คำแสลง สมมติฐานโดยปริยาย และผู้เช่าหลักของตนเอง เมื่อรู้ทั้งสองโลก ปัญหาด้านการสื่อสารจะถูกจับไว้ล่วงหน้า”
“ประการที่สอง นักพัฒนาที่มีประสบการณ์ด้านการออกแบบสามารถประเมินความซับซ้อนและความต้องการทรัพยากรได้ดีกว่านักพัฒนาเพียงคนเดียว นักออกแบบคนเดียว หรือแม้แต่ผู้จัดการผลิตภัณฑ์” Pieta กล่าวเสริม “บ่อยครั้ง การเปลี่ยนแปลงการออกแบบเล็กน้อยอาจทำให้เวลาในการพัฒนาลดลงอย่างมาก โดยเฉพาะอย่างยิ่งบนมือถือที่มีกระบวนทัศน์การออกแบบบางอย่างถูกสร้างไว้ล่วงหน้า ทำความเข้าใจว่าการปรับแต่งใดง่ายต่อการใช้งาน และแอนิเมชั่นใดที่ใช้งานง่าย จะช่วยให้มั่นใจว่าทั้งนักพัฒนาและนักออกแบบจะเพลิดเพลินไปกับกระบวนการ”
"ทีมที่มีอยู่บางทีมสามารถอ้างว่าการพบปะกับนักพัฒนาและนักออกแบบช่วยแก้ปัญหาเหล่านี้ได้" Pieta กล่าว "แต่บ่อยครั้งที่ไม่เป็นเช่นนั้น การประชุมสั้นเกินไปที่จะเจาะลึกถึงสมมติฐานการออกแบบโดยนัย การวิจัยผู้ใช้ก่อนหน้านี้ การตัดสินใจเกี่ยวกับสถาปัตยกรรมโค้ดที่มีอยู่ การเลือกใช้ภาษา และตัวเลือกอื่นๆ ที่กำหนดโครงการ มีเพียงผู้ที่มีประสบการณ์จากทั้งสองโลกเท่านั้นที่จะสามารถเชื่อมช่องว่างได้อย่างรวดเร็วและมีประสิทธิภาพ”
และอีกหนึ่งเคล็ดลับจากเรา: ใช้เครื่องมือสร้างต้นแบบที่เหมาะสม
เทคนิคการออกแบบ UI ของแอปบนอุปกรณ์เคลื่อนที่และเว็บบางอย่างสามารถสอนได้ และบางส่วนสามารถเรียนรู้ได้ด้วยวิธีที่ยากเท่านั้นผ่านประสบการณ์ โชคดีที่นักออกแบบและนักพัฒนาในปัจจุบันสามารถสร้างความเชี่ยวชาญตามที่พวกเขากล่าวไว้บนไหล่ของยักษ์ใหญ่
[ Proto .io เป็นเครื่องมือสร้างต้นแบบแอปบนอุปกรณ์เคลื่อนที่ที่ใช้โดยผู้ประกอบการและสตาร์ทอัพเพื่อสร้างต้นแบบเสมือนจริงแบบโต้ตอบเต็มรูปแบบซึ่งมีรูปลักษณ์และให้ความรู้สึกเหมือนแอปจริง]