تعامل

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

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

به جای تلاش برای استنتاج مکانیسم ورودی از اندازه صفحه، از ویژگی های رسانه در CSS استفاده کنید.

اشاره گر

می توانید سه مقدار ممکن را با ویژگی رسانه pointer آزمایش کنید: none ، coarse ، و fine .

اگر یک مرورگر مقدار pointer none را گزارش کند، ممکن است کاربر از صفحه کلید برای تعامل با وب سایت شما استفاده کند.

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

اگر یک مرورگر مقدار pointer را fine گزارش کند، به این معنی است که مکانیسم ورودی اولیه قادر به کنترل دقیق است. ماوس یا قلم یک اشاره گر خوب است.

می توانید اندازه عناصر رابط خود را متناسب با مقدار pointer تنظیم کنید. سعی کنید از این وب‌سایت در انواع دستگاه‌های مختلف دیدن کنید تا ببینید رابط چگونه سازگار است.

در این مثال، دکمه ها برای نشانگرهای درشت بزرگتر شده اند:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

همچنین می توان عناصر را برای نشانگرهای ظریف کوچکتر کرد، اما مراقب انجام این کار باشید:

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

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

هر اشاره گر

ویژگی رسانه pointer ظرافت مکانیزم ورودی اولیه را گزارش می دهد. اما بسیاری از دستگاه ها بیش از یک مکانیسم ورودی دارند. این امکان وجود دارد که شخصی با استفاده از صفحه نمایش لمسی و ماوس همزمان با وب سایت شما تعامل داشته باشد.

any-pointer با ویژگی رسانه pointer تفاوت دارد زیرا در صورت موفقیت هر دستگاه اشاره گر آزمایش را گزارش می دهد.

مقدار any-pointer none به این معنی است که هیچ دستگاه اشاره‌ای در دسترس نیست.

مقدار coarse any-pointer به این معنی است که حداقل یک دستگاه اشاره گر دقیق نیست. اما ممکن است این مکانیسم ورودی اولیه نباشد.

مقدار any-pointer fine به این معنی است که حداقل یک دستگاه اشاره گر قادر به کنترل ریزدانه است. اما باز هم، این ممکن است مکانیزم ورودی اولیه نباشد.

از آنجایی که در صورت موفقیت هر یک از مکانیسم‌های ورودی، جستجوی رسانه‌ای any-pointer نتیجه مثبتی را گزارش می‌کند، این امکان برای مرورگر وجود دارد که نتیجه‌ای را برای any-pointer: fine و همچنین یک نتیجه را برای any-pointer: coarse گزارش کند. در این صورت ترتیب درخواست های رسانه ای شما اهمیت دارد. آخرین مورد اولویت خواهد داشت.

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

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

شناور

ویژگی رسانه hover نشان می دهد که آیا مکانیسم ورودی اولیه می تواند روی عناصر شناور بماند یا خیر. این معمولاً به این معنی است که نوعی مکان نما روی صفحه نمایش وجود دارد که توسط ماوس یا ترک پد کنترل می شود.

بر خلاف ویژگی رسانه pointer که بین نشانگرهای ظریف و درشت تفاوت قائل می شود، ویژگی رسانه hover باینری است. اگر دستگاه ورودی اولیه قابلیت شناور شدن روی عناصر را داشته باشد، مقدار hover را گزارش خواهد کرد. در غیر این صورت ارزش none است.

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

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

اگر از ماوس خود برای قرار دادن روی آن دکمه استفاده کنید، نماد ظاهر می شود. اما اگر از صفحه کلید خود برای جابجایی روی دکمه استفاده کنید، نماد نامرئی باقی می ماند. وقتی از صفحه کلید استفاده می کنید، به جای معلق ماندن، تمرکز می کنید. یک دستگاه دسکتاپ با ماوس متصل گزارش می دهد که مکانیسم ورودی اولیه قادر به شناور است، که درست است. اما هر کسی که از صفحه کلید در حالی که ماوس متصل است استفاده می کند، از مزایای سبک های :hover بهره مند نخواهد شد. بنابراین ایده خوبی است که سبک های :hover و :focus برای پوشش هر دو تعامل ترکیب کنید.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

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

هر شناور

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

همانطور که any-pointer در هر یک از مکانیزم های ورودی گزارش می دهد، هر یک از مکانیسم های ورودی موجود قادر به شناور شدن بر روی عناصر باشد any-hover درست خواهد بود.

اگر تصمیم به معکوس کردن منطق در مثال قبلی داشتید، می‌توانید استایل‌های hover را به صورت پیش‌فرض درآورید و سپس اگر any-hover مقدار none داشت، آن‌ها را حذف کنید.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

در دستگاهی که مکانیسم ورودی ندارد، نماد اضافی همیشه قابل مشاهده است.

کیبوردهای مجازی

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

انواع ورودی

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

انواع ورودی HTML5 یک راه عالی برای توصیف عناصر input شما هستند. ویژگی type مقادیری مانند email ، number ، tel ، url و موارد دیگر را می پذیرد.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

حالت های ورودی

ویژگی inputmode به شما کنترل دقیقی بر روی صفحه کلیدهای مجازی می دهد. برای مثال، در حالی که یک type input با مقدار number وجود دارد، می‌توانید از ویژگی inputmode برای تمایز بین اعداد کامل و اعشاری استفاده کنید.

اگر یک عدد کامل می‌خواهید، مانند سن شخصی، از inputmode="numeric" استفاده کنید.

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

اگر عددی را می‌خواهید که شامل اعشار باشد، مانند قیمت، از inputmode="decimal" استفاده کنید.

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

تکمیل خودکار

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

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

این ویژگی‌های HTML - type ، inputmode و autocomplete - افزوده‌های کوچکی به فیلدهای فرم شما هستند، اما می‌توانند تفاوت بزرگی در تجربه کاربر ایجاد کنند. با پیش بینی و پاسخگویی به قابلیت های دستگاه کاربر خود، کاربران خود را قدرتمند می کنید. برای اطلاعات عمیق تر، دوره ای اختصاص داده شده است که به شما در یادگیری فرم ها کمک می کند.

در مرحله بعدی در این دوره، زمان بررسی برخی از الگوهای رابط رایج است.

درک خود را بررسی کنید

دانش خود را در مورد تعاملات آزمایش کنید