How I Redesigned Pagination for BTAkademi

Introduction

This study focuses on the pagination UI/UX design for the "BTAkademi Eğitimler" page, which displays a list of educational courses. The goal is to assess the current pagination design, identify strengths and weaknesses, and provide recommendations for improvement to enhance user experience and accessibility.

Shortcomings of the Current Version

  1. Lack of Directional Icons: The "Previous" and "Next" buttons do not have directional icons. This can make it harder for users to understand which direction they are navigating. Adding icons can make the user experience more intuitive.

  2. Excessive Page Number Display: The number of visible page numbers is too high. This can create visual clutter, especially when there are many pages. Reducing the number of displayed page numbers and using more ellipses can simplify the design.

Current Version of the Pagination

Redesigned Pagination

  1. Layout and Alignment: The pagination is centrally located below the content cards, making it easy for users to navigate between pages.

  2. Size and Spacing: Page numbers and navigation buttons have adequate spacing, improving readability and clickability.

  3. Visibility of Page Numbers: Page numbers are sufficiently large and readable. The active page number is highlighted with a distinct blue background.

  4. Hover and Active States: The hover state changes the color of the page numbers, helping users identify which page they are about to select.

  5. Disabled Previous Button: The "Previous" button is greyed out when on the first page, indicating it is not clickable.

Redesigned Version of the Pagination

Prototype Video of the Redesigned Pagination

#UXDesign #UIDesign #UXResearch #UXUI #WebDesign #UserExperience #DesignThinking #UserInterface #DesignReview #InteractionDesign #DesignImprovement #UIX101 #UI 085 #Pagination #BTAkademi

More by Eda Hazal Tümer

View profile