پیش کار

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

بررسی اعتبار: معماری و کد

بدهی فنی را پرداخت کنید!

تا جایی که ممکن است اشکالات ساده را برطرف کنید و دارایی‌ها و کدهای غیرضروری را قبل از اندازه‌گیری عملکرد حذف کنید - اما مطمئن شوید که سابقه قبل و بعد از مشکلات و رفع‌ها را نگه دارید. این پیشرفت‌ها همچنان می‌توانند بخشی از کار حسابرسی شما باشند.

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

خطاهای زمان اجرا
خطاهای گزارش شده در کنسول مرورگر را بررسی کنید. نباید وجود داشته باشد :).

پرز زدن
آیا در کد HTML، CSS یا جاوا اسکریپت شما خطاهایی وجود دارد؟ ایجاد لنت در گردش کار می تواند به حفظ کیفیت کد و جلوگیری از رگرسیون کمک کند. ما HTMLHint ، StyleLint و ESLint را توصیه می کنیم، که می توانند به عنوان افزونه های ویرایشگر کد استفاده شوند، یا از خط فرمان در فرآیندهای گردش کار و ابزارهای یکپارچه سازی مداوم مانند تراویس اجرا شوند.

لینک ها و تصاویر خراب
ابزارهای زیادی برای آزمایش لینک های شکسته در زمان ساخت و زمان اجرا وجود دارد، از جمله افزونه های Chrome ( این یکی خوب است) و ابزارهای Node مانند Broken Link Checker .

پلاگین ها
افزونه هایی مانند Flash و Silverlight می توانند یک خطر امنیتی باشند، پشتیبانی از آنها منسوخ شده است و در تلفن همراه کار نمی کنند. از Lighthouse برای بررسی افزونه ها استفاده کنید .

با انواع دستگاه ها و زمینه ها تست کنید

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

برخی از این بررسی‌ها نسبتاً ذهنی هستند، اما می‌توانند مشکلاتی را شناسایی کنند که بر عملکرد درک شده تأثیر می‌گذارند. به عنوان مثال، لینک های شکسته، زمان را تلف می کنند و احساس "بدون پاسخ" می کنند. متن ناخوانا دیر خوانده می شود.

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

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

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

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

صفحه پست وبلاگ در حال اجرا بر روی یک تلفن با مشخصات بالا و یک تلفن با مشخصات پایین

در صفحه بزرگتر، متن کوچک اما قابل خواندن است. در صفحه کوچک‌تر، مرورگر طرح‌بندی را به‌درستی ارائه می‌کند، اما متن قابل خواندن نیست، حتی زمانی که بزرگ‌نمایی می‌شود. صفحه نمایش تار است و دارای یک «رنگ‌بازی» است - سفید به نظر نمی‌رسد - محتوا را کمتر خوانا می‌کند.

یافته های ساده ای مانند این می تواند بسیار مهم تر از داده های عملکرد مبهم باشد!

UI و UX را امتحان کنید

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

می توانید در دوره Udacity در مورد Accessibility و مقاله Web Fundamentals How To Do an Accessibility Review درباره پیاده سازی و بررسی قابلیت دسترسی اطلاعات بیشتری کسب کنید.

حسابرسی دسترسی خود را ثبت کنید. این احتمال وجود دارد که بتوانید بهبودهای ساده ای را انجام دهید که برای همه کاربران شما مفید است.

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

تصاویر، صدا و تصویر
محتوای مملو، نسبت ابعاد نادرست ، برش ضعیف و مشکلات کیفیت را آزمایش کنید.

تست های ذهنی UI
ممکن است همه این موارد مرتبط نباشند، اما تغییرات ساده می‌تواند بازسازی را آسان‌تر کند:

  • آیا اینجا چه کاری می توانم انجام دهم؟ وقتی سایت را باز می کنید بلافاصله پاک می شود؟
  • آیا به سمت مصرف محتوا و دنبال کردن لینک ها کشیده می شوید؟
  • آیا سلسله مراتب یا مسیرهای بصری وجود دارد - یا همه چیز وزن بصری یکسانی دارد؟
  • آیا چیدمان به هم ریخته است؟
  • آیا فونت های زیادی وجود دارد؟
  • آیا تصاویر یا محتوای دیگری وجود دارد که بتوان حذف کرد؟
  • طراحی محتوا به اندازه طراحی رابط مهم است. آیا محتوای متن و تصویر در سایت شما برای زمینه های موبایل و دسکتاپ مناسب است؟ آیا می توان چیزی را حذف کرد؟ برای موبایل بنویس