یک وب سایت بسیار بیشتر از گروهی از صفحات است که توسط پیوندها به هم متصل شده اند. این یک رابط است، فضایی که در آن چیزهای مختلف – در این مورد، حضور یک شخص و یک شرکت یا فرد در وب – با یکدیگر ملاقات می کنند، ارتباط برقرار می کنند و بر یکدیگر تأثیر می گذارند. این تعامل تجربه ای را برای بازدیدکننده ایجاد می کند، و به عنوان یک طراح وب، وظیفه شما این است که اطمینان حاصل کنید که تجربه تا آنجا که ممکن است خوب است.

و نکته کلیدی آن این است که اول، مهمتر از همه و همیشه به کاربر خود فکر کنید.

خوشبختانه، در حالی که طراحی وب یک رشته نسبتاً جدید است، مدیون مطالعه علمی تعامل انسان و کامپیوتر (HCI) است. و این 9 دستورالعمل مفید مستقیماً از تحقیقات HCI به شما کمک می کند هنگام انجام فرآیند طراحی روی کاربران خود تمرکز کنید .

طراحی رابط، که بر طرح‌بندی عملکرد رابط‌ها تمرکز دارد، زیرمجموعه‌ای از طراحی تجربه کاربر است که بر تصویر بزرگ‌تر تمرکز دارد: یعنی کل تجربه، نه فقط رابط.

1. کاربران خود را بشناسید

مهمتر از همه، شما باید بدانید که کاربران شما چه کسانی هستند – درون و بیرون. این بدان معناست که دانستن تمام داده های جمعیت شناختی که برنامه(های) تجزیه و تحلیل شما می توانند به دست آورند، بله. اما مهمتر از آن این است که بدانند به چه چیزی نیاز دارند و چه چیزی مانع دستیابی آنها به اهدافشان می شود.

رسیدن به آن سطح از همدلی به چیزی بیش از تجزیه و تحلیل دقیق آمار نیاز دارد. این نیاز به شناخت افرادی دارد که از وب سایت شما استفاده می کنند. این بدان معناست که با آنها رو در رو صحبت کنید، تماشا کنید که آنها از محصول شما (و شاید دیگران) استفاده می کنند، و از آنها سؤالاتی بپرسید که عمیق تر از “نظر شما در مورد این طراحی چیست؟”

اهداف آنها چیست؟ چه چیزی مانع از دستیابی آنها به این اهداف می شود؟ چگونه یک وب سایت می تواند به آنها کمک کند تا بر آن چالش ها غلبه کنند یا در کنار آنها کار کنند؟

در دانستن آنچه کاربران شما می خواهند متوقف نشوید. عمیق تر کاوش کنید و دریابید که آنها به چه چیزی نیاز دارند. به هر حال، خواسته ها فقط زاییده نیازها هستند. اگر بتوانید نیاز عمیق کاربر را برطرف کنید، خواسته‌های او را برطرف خواهید کرد و در عین حال الزامات اساسی‌تری را نیز برآورده خواهید کرد.

بینش‌هایی که از تجزیه و تحلیل داده‌ها و صحبت با کاربران به دست می‌آورید، هر تصمیمی را که می‌گیرید، از نحوه استفاده افراد از رابط شما گرفته تا نوع محتوایی که در آن رابط برجسته می‌کنید، آگاه می‌سازد.

2. نحوه استفاده مردم از رابط شما را تعریف کنید

قبل از اینکه رابط کاربری خود را طراحی کنید، باید نحوه استفاده افراد از آن را مشخص کنید. با شیوع روزافزون دستگاه های مبتنی بر لمس، این یک نگرانی اساسی تر از آن چیزی است که فکر می کنید. فقط نگاه کن

Tinder: تجربه کاربری اپلیکیشن به معنای واقعی کلمه با سهولت و تکانشگری یک سوایپ ساده تعریف می‌شود.

افراد از وب‌سایت‌ها و برنامه‌ها به دو صورت استفاده می‌کنند: مستقیم (از طریق تعامل با عناصر رابط محصول) و غیر مستقیم (با تعامل با عناصر رابط کاربری خارجی محصول).

نمونه هایی از تعاملات مستقیم

  • ضربه زدن روی یک دکمه
  • کشیدن یک کارت
  • کشیدن و انداختن یک مورد با نوک انگشت

نمونه هایی از تعاملات غیر مستقیم

  • اشاره و کلیک کردن با ماوس
  • استفاده از دستورات/میانبرهای کلیدی
  • تایپ کردن در فیلد فرم
  • طراحی روی تبلت Wacom
گاهی اوقات، یک تعامل بسیار آسان است.

کاربران شما چه کسانی هستند و از چه دستگاه‌هایی استفاده می‌کنند باید عمیقاً تصمیمات شما را در اینجا آگاه کنند. اگر برای سالمندان یا افراد دیگری با مهارت دستی محدود طراحی می کنید، نمی خواهید به کشیدن انگشت تکیه کنید. اگر برای نویسندگان یا کدنویسان طراحی می‌کنید که عمدتاً از طریق صفحه‌کلید با برنامه‌ها تعامل دارند، باید از همه میانبرهای رایج صفحه‌کلید پشتیبانی کنید تا زمان کار با ماوس را به حداقل برسانید.

3. انتظارات را تعیین کنید

بسیاری از تعاملات با یک سایت یا برنامه عواقبی دارد: کلیک کردن روی یک دکمه می تواند به معنای خرج کردن پول، پاک کردن یک وب سایت یا اظهار نظر توهین آمیز در مورد کیک تولد مادربزرگ باشد. و هر زمان که عواقبی وجود داشته باشد، اضطراب نیز وجود دارد.

بنابراین مطمئن شوید که قبل از انجام آن، به کاربران اطلاع دهید که پس از کلیک روی آن دکمه چه اتفاقی خواهد افتاد. شما می توانید این کار را از طریق طراحی و/یا کپی انجام دهید.

تعیین انتظارات با طراحی

  • برجسته کردن دکمه ای که با عمل مورد نظر مطابقت دارد
  • استفاده از یک نماد کاملاً قابل درک (مانند سطل زباله برای دکمه حذف، علامت مثبت برای افزودن چیزی، یا ذره بین برای جستجو) در ترکیب با کپی
  • انتخاب یک رنگ با معنای مرتبط (سبز برای دکمه “برو”، قرمز برای “توقف”)

تعیین انتظارات با کپی

  • نوشتن کپی دکمه روشن
  • ارائه کپی جهت دهی/ تشویقی در حالت های خالی
  • ارائه اخطار و درخواست تایید

برای اقدامات با پیامدهای غیرقابل برگشت، مانند حذف دائم چیزی، منطقی است که از افراد بپرسید که آیا مطمئن هستند یا خیر.

در InVision، کلیک کردن روی نماد سطل زباله بلافاصله صفحه‌ای را حذف نمی‌کند. درعوض، از شما می‌پرسد که آیا مطمئن هستید یا خیر و به شما اطلاع می‌دهد که قابل لغو نیست.

4. اشتباهات را پیش بینی کنید

> خطا كردن انسان است. بخشیدن، الهی.

الکساندر پوپ، “مقاله ای در مورد نقد”

مردم اشتباه می کنند، اما نباید (همیشه) عواقب آن را متحمل شوند. دو راه برای کمک به کاهش تأثیر خطای انسانی وجود دارد:

  1. از اشتباهات قبل از وقوع جلوگیری کنید
  2. راه هایی برای رفع آنها پس از وقوع ارائه دهید

در تجارت الکترونیک و طراحی فرم، تکنیک های پیشگیری از اشتباه زیادی را مشاهده می کنید. تا زمانی که تمام فیلدها را پر نکنید، دکمه ها غیر فعال می مانند. فرم ها تشخیص می دهند که آدرس ایمیل به درستی وارد نشده است. پنجره‌های بازشو از شما می‌پرسند که آیا واقعاً می‌خواهید سبد خرید خود را رها کنید (بله، آمازون این کار را می‌کنم – مهم نیست چقدر ممکن است باعث زخمی شدن افراد بیچاره شود).

پیش بینی اشتباهات اغلب کمتر از تلاش برای رفع آنها بعد از واقعیت ناامید کننده است. این به این دلیل است که قبل از ایجاد حس رضایت‌بخش تکمیل که با کلیک کردن روی دکمه «بعدی» یا «ارسال» ایجاد می‌شود، ایجاد می‌شوند.

گفته می شود، گاهی اوقات شما فقط باید اجازه دهید تصادفات رخ دهد. در آن زمان است که پیام های خطای دقیق واقعاً خود را نشان می دهند.

هنگام نوشتن پیام های خطا، مطمئن شوید که آنها دو کار را انجام می دهند:

  1. مشکل را توضیح دهید. به عنوان مثال، «شما گفتید که در مریخ متولد شده‌اید، که انسان‌ها آن را مستعمره نکرده‌اند. هنوز.”
  2. نحوه رفع آن را توضیح دهید. به عنوان مثال، “لطفاً یک زادگاه اینجا روی زمین وارد کنید.”

توجه داشته باشید که می توانید یک صفحه از همان کتاب را برای موقعیت های بدون خطا بردارید. به عنوان مثال، اگر چیزی را حذف کردم، اما امکان بازیابی آن وجود دارد، به من اطلاع دهید که با یک خط کپی مانند “شما همیشه می توانید موارد حذف شده را با رفتن به سطل زباله خود و کلیک بر روی “بازیابی” بازیابی کنید.

اصل پیش بینی خطای کاربر، اصل پوکا یوکی نامیده می شود. Poka-yoke یک اصطلاح ژاپنی است که به “ضد اشتباه” ترجمه می شود.

5. بازخورد بدهید – سریع

در دنیای واقعی، محیط به ما بازخورد می دهد. ما صحبت می کنیم و دیگران پاسخ می دهند (معمولا). ما گربه‌ای را می‌خراشیم، و او خرخر می‌کند یا خش‌خش می‌کند (بسته به بد خلقی‌اش و میزان مکیدن ما در هنگام خاراندن گربه).

اغلب اوقات، رابط‌های دیجیتالی نمی‌توانند جواب دهند، و ما را به این فکر می‌اندازد که آیا باید صفحه را دوباره بارگیری کنیم، لپ‌تاپ را مجددا راه‌اندازی کنیم، یا فقط آن را از نزدیکترین پنجره موجود بیرون بیاوریم.

پس آن انیمیشن در حال بارگذاری را به من بدهید. آن دکمه را باز کنید و وقتی روی آن ضربه می زنم آن را بازگردانید – اما نه زیاد. و وقتی کاری را انجام می‌دهم که شما موافقم فوق‌العاده است، به من یک پنج مجازی بدهید. (با تشکر، MailChimp.)

 

MailChimp هنگام برنامه ریزی یا ارسال ایمیل، بازخورد و تشویق را ارائه می دهد.

فقط مطمئن شوید که همه چیز سریع اتفاق می افتد. Usability.gov هر تاخیر بیش از 1 ثانیه را به عنوان یک وقفه تعریف می کند. بیش از 10 ثانیه، یک اختلال. و دومی سخاوتمندانه است: برای حدود نیمی از جمعیت ایالات متحده، 3 ثانیه برای ایجاد جهش کافی است.

اگر صفحه‌ای در کمتر از 5 ثانیه بارگیری می‌شود، نوار پیشرفت را نمایش ندهید، زیرا در واقع زمان بارگذاری را طولانی‌تر نشان می‌دهد. در عوض، از تصویرسازی استفاده کنید که به معنای پیشرفت نباشد، مانند «چرخ مرگ» بدنام مک. اما نه آن. اگر از نوارهای پیشرفت در سایت خود استفاده می کنید، ترفندهای بصری را امتحان کنید تا بارگذاری سریعتر به نظر برسد.

6. به دقت در مورد قرارگیری و اندازه عنصر فکر کنید

قانون فیتس، یک اصل اساسی تعامل انسان و کامپیوتر (HCI)، بیان می کند که:

زمان به دست آوردن یک هدف تابعی از فاصله و اندازه هدف است.

به عبارت دیگر: هر چه چیزی نزدیکتر و/یا بزرگتر باشد، سریعتر می توانید مکان نما (یا انگشت) خود را روی آن قرار دهید. این بدیهی است که انواع پیامدها برای تعامل و تکنیک های طراحی رابط کاربری دارد، اما سه مورد از مهمترین آنها عبارتند از:

دکمه ها و سایر «هدف های کلیک» (مانند نمادها و پیوندهای متنی) را به اندازه کافی بزرگ کنید تا به راحتی ببینید و کلیک کنید. این امر به ویژه در مورد تایپوگرافی، منوها و سایر لیست‌های پیوند مهم است، زیرا فضای ناکافی باعث می‌شود افراد بارها و بارها روی پیوندهای اشتباه کلیک کنند.

دکمه‌های رایج‌ترین اعمال را بزرگ‌تر و برجسته‌تر کنید.

ناوبری (و سایر عناصر بصری تعاملی رایج، مانند نوارهای جستجو) را در لبه ها یا گوشه های صفحه قرار دهید. این مورد آخر ممکن است غیر منطقی به نظر برسد، اما کار می‌کند زیرا نیاز به دقت را کاهش می‌دهد: کاربر نیازی به نگرانی در مورد بیش از حد هدف کلیک خود ندارد.

در حالی که به قرار دادن عناصر و اندازه فکر می کنید، همیشه مدل تعامل خود را در نظر داشته باشید. اگر سایت شما به پیمایش افقی به جای پیمایش عمودی نیاز دارد، باید در نظر بگیرید که کجا و چگونه کاربران را به این نوع تعامل غیرعادی راهنمایی کنید.

7. استانداردها را نادیده نگیرید

از آنجایی که طراحان از خلاقیت بالایی برخوردار هستند، تمایل به اختراع مجدد چیزها دارند – اما همیشه این بهترین ایده نیست.

چرا؟ از آنجا که یک نسخه اصلاح‌شده از تعامل یا رابط آشنا «بار شناختی» را اضافه می‌کند: باعث می‌شود مردم دوباره درباره فرآیندی که قبلاً آموخته‌اند فکر کنند. بدیهی است که می‌توانید چرخ را هرچه می‌خواهید دوباره اختراع کنید – اما فقط در صورتی که واقعاً طراحی را بهبود بخشد.

این قانون سرانگشتی توضیح می‌دهد که چرا نوار منوی Google Docs تقریباً همه گزینه‌های مشابه مایکروسافت ورد قبل از ویستا را دارد:

نوار منوی مایکروسافت ورد قبل از ویستا.

 

نوار منوی Google Docs، 2015

همچنین توضیح می‌دهد که چرا Pocket چند سال پیش مجبور شد جای دکمه بایگانی را در برنامه اندروید خود تغییر دهد.

تغییر یک دکمه برای سازگاری بیشتر با الگوهای طراحی اندروید باعث شد تا کاربران جدید 23 درصد بیشتر به استفاده از Pocket ادامه دهند.

تا پاییز 2013، دکمه بایگانی در سمت چپ بالای صفحه قرار داشت – درست همان جایی که مشخصات طراحی اندروید می‌گفت دکمه «بالا» باید باشد. Pocket می‌خواست افراد را بر روی تجربه خواندن متمرکز کند و کنترل سخت‌افزاری موجود را تکراری نکند، اما قرارگیری ناسازگار باعث شد که کاربران جدید به‌طور تصادفی مقاله‌ای را که می‌خواندند ببندند و بایگانی کنند، نه اینکه همانطور که انتظار می‌رفت به فهرست خواندن خود بازگردند.

این تغییر کوچک “احتمال ادامه استفاده [کاربران جدید] از Pocket را از این نقطه به بعد تا 23 درصد افزایش داد.”

8. رابط های خود را برای یادگیری آسان کنید

وقتی صحبت از سادگی به میان می‌آید، مردم اغلب به مقاله‌ای از جورج میلر، روان‌شناس هاروارد استناد می‌کنند به نام «عدد جادویی هفت، به علاوه یا منهای دو: برخی محدودیت‌ها در ظرفیت ما برای پردازش اطلاعات». این مقاله پیشنهاد می‌کند که افراد فقط می‌توانند 5 تا 9 چیز را با هر قابلیت اطمینانی در حافظه کوتاه‌مدت خود نگه دارند. خود میلر این را تصادفی نامید، اما به نظر نمی‌رسد کسی از استناد به او جلوگیری کند.

همانطور که گفته شد، منطقی است که هر چه چیزی ساده تر باشد، به خاطر سپردن آن در کوتاه مدت آسان تر است. بنابراین، هر زمان که ممکن است، تعداد چیزهایی را که یک فرد باید به خاطر بسپارد تا از رابط کاربری شما به طور موثر و مؤثر استفاده کند، محدود کنید. شما می توانید این کار را با تکه تکه کردن اطلاعات، یعنی شکستن آن به قطعات کوچک و قابل هضم، تسهیل کنید.

این ایده با قانون حفظ پیچیدگی تسلر مطابقت دارد، که بیان می کند که طراحان رابط کاربری باید رابط های خود را تا حد امکان ساده کنند. این می تواند به معنای پنهان کردن پیچیدگی یک برنامه در پشت یک رابط ساده شده باشد. یک نمونه محبوب از محصولی که از این قانون پیروی نمی کند، Microsoft Word است.

اکثر مردم فقط چند کار را در Word انجام می دهند – به عنوان مثال، تایپ کردن – در حالی که دیگران می توانند از آن برای انجام انواع کارهای قدرتمند استفاده کنند. اما در سرتاسر جهان، همه نسخه‌های مشابهی از Word را با رابط کاربری یکسان باز می‌کنند و جو معمولی شما – که کاربر قدرتمندی نیست – تحت تأثیر گزینه‌های متنوعی قرار می‌گیرد که احتمالاً هرگز از آنها استفاده نخواهند کرد.

این منجر به مفهومی به نام افشای مترقی شد که در آن ویژگی‌های پیشرفته در رابط‌های ثانویه پنهان می‌شوند. شما اغلب این را در صفحات اصلی وب سایت ها مشاهده خواهید کرد، جایی که تکه های کوتاهی از کپی یک محصول یا ویژگی را معرفی می کنند، سپس به صفحه ای پیوند می زنند که در آن کاربران می توانند اطلاعات بیشتری کسب کنند. (این نیز بهترین روش برای طراحی موبایل است، جایی که ناوبری قوی همیشه یک چالش است.)

نکته حرفه ای: از استفاده از “بیشتر بیاموزید” و متن غیر اختصاصی مشابه در پیوندها و دکمه ها خودداری کنید. چرا؟ زیرا به کاربران نمی گوید که در مورد چه چیزی “بیشتر بیاموزند”. اغلب، افراد به سادگی صفحه ای را اسکن می کنند و به دنبال پیوندی می گردند که آنها را به جایی که می خواهند ببرد، و «بیشتر بیاموزید»، که 15 بار تکرار می شود، کمکی نمی کند. این به ویژه برای کاربران صفحه خوان صادق است.

9. تصمیم گیری را ساده کنید

تعداد زیادی از وب بر سر ما فریاد می زند: «بنرها» ناگهان گسترش می یابند و تبدیل به تبلیغات تمام صفحه می شوند. مدال ها ظاهر می شوند و از ما می خواهند در وبلاگ هایی که هنوز فرصت خواندن آنها را نداشته ایم مشترک شویم. بینابینی‌های ویدیویی ما را در مسیر خود متوقف می‌کنند و ما را مجبور می‌کنند ثانیه‌های ارزشمند را به آرامی تماشا کنیم. و حتی من را در مورد ویجت‌ها، برنامه‌ها، راهنمایی‌های ابزار شروع نکنید…

گاهی اوقات من مشتاق یک وب آرام تر هستم – و قانون هیکس به همه ما دلیلی برای ساختن یک وب می دهد. این ایده به اندازه نتیجه نهایی آن ساده است: هر چه گزینه های رابط کاربری بیشتری را به کاربر ارائه دهید، تصمیم گیری برای او سخت تر می شود.

این تقریباً بر همه چیزهایی که می سازیم تأثیر می گذارد:

  • طرح بندی های کلی
  • منوهای ناوبری
  • صفحات قیمت گذاری
  • نمایه های وبلاگ
  • فیدهای محتوا

لیست ادامه دارد. اما نتیجه این است: هرچه طراحی‌های خود را ساده‌تر کنیم، تصمیم‌گیری برای کاربران سریع‌تر و آسان‌تر می‌شود. دقیقاً به همین دلیل است که صفحات فرود و ایمیل های غیرخبرنامه ای باید فقط یک تماس برای اقدام داشته باشند.

نکته حرفه ای: گاهی اوقات شما واقعاً می خواهید کاربران سرعت خود را کاهش دهند و گزینه های خود را در نظر بگیرند. به همین دلیل است که طرح‌های کاشی‌شده Pinterest، Dribbble و بسیاری از وبلاگ‌ها در واقع به خوبی کار می‌کنند. از این گذشته، هرچه گزینه های بیشتری بین آنها تصمیم بگیرید، احتمال بیشتری وجود دارد که گزینه ای را پیدا کنید که برای شما مناسب باشد.

مطالب مرتبط: UX در مقابل UI: تفاوت های کلیدی که هر طراح باید بداند

10. به داده ها گوش دهید

در حالی که همه ما ممکن است آرزو کنیم که طرح های ما صرفاً بر اساس شایستگی هنری خود ارزیابی شوند، واقعیت این است که بهینه سازی طرح شما برای رسیدن به هدفش به همان اندازه مهم است.

در حالی که همه ما ممکن است آرزو کنیم که طرح های ما صرفاً بر اساس شایستگی هنری خود ارزیابی شوند، واقعیت این است که بهینه سازی طرح شما برای رسیدن به هدفش به همان اندازه مهم است.

در حالی که تحقیقات و آزمایش کاربر می تواند در هدایت تصمیمات طراحی شما به سمت تحقق هدف سایت شما بسیار مفید باشد، داده های جمع آوری شده پس از راه اندازی بسیار ارزشمند باقی می مانند.

بنابراین تجزیه و تحلیل سایت خود را تنظیم کنید و به طور منظم آنها را تجزیه و تحلیل کنید. مجموعه ای از ابزارهای تحلیلی مختلف وجود دارد، اما من Google Analytics و/یا Mixpanel را بسته به نوع پروژه توصیه می کنم.

Mixpanel بر روی رویدادها تمرکز می‌کند، بنابراین داده‌ها را بر اساس اقداماتی که بازدیدکننده در سایت شما انجام می‌دهد جمع‌آوری می‌کند، در حالی که Google Analytics رفتاری‌تر است، زمان‌های جلسه، منابع ترافیک و غیره را در اختیار شما قرار می‌دهد. در حالی که هر دو ابزار می‌توانند هر دو شکل داده را ارائه کنند، اما واقعاً در آن می‌درخشند. مناطق تمرکز آنها، بنابراین هر کدام را که با نیازهای شما مطابقت دارد انتخاب کنید.

توجه: هر دوی این ابزارها تا مقدار مشخصی از نقاط داده رایگان هستند. Webflow و پلتفرم‌های مشابه معمولاً راه‌اندازی تجزیه و تحلیل را از طریق تبادل کلید API آسان می‌کنند.

مطالب مرتبط: 17 ابزار مفید برای طراحان UI/UX

طراحی تعاملی عالی در سایت های جریان وب

بسیاری از طراحانی که از Webflow استفاده می کنند، از این دستورالعمل ها برای ایجاد تعاملات بصری و جذاب استفاده کرده اند. در اینجا چند نمونه آورده شده است.

گسترش پیمایش دایره

Waldo Broodryk یک منوی متحرک سرگرم کننده برای موبایل و دسکتاپ ایجاد کرد. در بارگذاری صفحه، دایره در سمت راست پایین «منو» را می‌خواند. با کلیک کردن، آن را گسترش می دهد تا صفحات موجود را نشان دهد و به X تغییر می کند و به کاربر اجازه می دهد منو را ببندد و دوباره روی محتوا تمرکز کند.

این یک ترکیب عالی از طراحی واضح و جذاب است و به قانون فیتس توجه زیادی دارد: هدف قرار دادن پیوندها در لبه صفحه آسان‌ترین کار است. زمانی که نمی خواهید سلسله مراتبی را در پیمایش خود داشته باشید، ناوبری دایره ای گزینه جالبی است.

آیا برای آن دختر نوشیدنی می خرید؟

طراح Shane Hurt این درخت تصمیم گیری تعاملی شگفت انگیز را گرد هم آورده تا به شما کمک کند تصمیم بگیرید که آیا برای آن دختر نوشیدنی بخرید یا نه. این طرح دارای حجم زیادی از محتوا است، اما شما را بر روی کار در دست تمرکز لیزری نگه می‌دارد: پاسخ دادن به سؤال فعلی و حرکت به سمت تصمیم خود. روشی برای ساده نگه داشتن رابط کاربری، شین.

طراحی مجدد Uniqlo

صفحه اصلی جایگزین uniqlo

طراح تیم نوح یک روز در حال خرید از وب سایت Uniqlo بود که متوجه شد سیستم ناوبری آنها چقدر پیچیده و منحصر به فرد است. او با الهام گرفتن تصمیم گرفت ” این را دوباره بسازد ، اما به روشی سازگارتر با تبلت و موبایل.”

چیز مورد علاقه من در مورد این است که چگونه او ناوبری چند سطحی Uniqlo را که چندین کلیک و بارگذاری صفحه در وب سایت دسکتاپ واقعی برند نیاز دارد، به یک تجربه تک صفحه ای تبدیل کرد. (منصفانه، Uniqlo همین کار را در سایت تلفن همراه خود انجام می دهد، اما این یک زیر دامنه موبایل است، نه یک نسخه واکنش گرا از سایت دسکتاپ آنها.)

توجه: این طراحی مجدد فقط یک پروژه شخصی بود و به هیچ وجه به Uniqlo وابسته نبود.

شتاب دهنده ورزشی سرب

راه اندازی کنید تا رهبری کنید

در اوایل سال 2017، طراح Jaro Quastenberg سایتی را راه اندازی کرد که واقعاً قدرت تعاملات بصری را در Webflow نشان می دهد: Lead Sport Accelerator.

این سایت واقعاً در دو مورد از نکات ذکر شده در بالا می درخشد. اول: شناخت کاربران شما. Lead Sports Accelerator می‌داند که در تلاش برای جذب سازنده‌های محصول هستند، و برای انجام این کار، باید از طریق وب‌سایت خود تأثیری عالی بگذارند. دوم ارائه بازخورد است. چه در حال پیمایش، شناور کردن یا کلیک کردن روی یک عنصر در صفحه باشید، فوراً به عملکرد بازدیدکننده پاسخ می‌دهد، اغلب به روش‌های نمایشی و لذت‌بخش.

از منو تا فعل و انفعالات پیمایش – این یک نمونه عالی از عملکرد بهینه شده در مورد آنچه برخی ممکن است هنر را ترکیبی در نظر بگیرند، است.

نظرات غیر فعال است