Desktop and Mobile

Desktop and mobile design so far had interaction and visual parity i.e. similar affordances are used to open preview and the preview itself are identical looking.

Desktop.png

Frame 110.png

Two problems identified with design on mobile

  1. Opening the preview: The intention was that the arrows would give a visual affordance for users to open a preview. However, users may not understand what tapping on an arrow does. Unlike desktop, (where the arrows appear on hover), the arrows on mobile are always there and it may come across as a primary way of going to the article.

Special_Search.png

  1. Layout of the preview: Preview on mobile is a full screen experience. Unlike desktop, (where the form itself indicates function), the preview on mobile can easily be confused with the article itself.

Special_Search.png

Comparing search preview with article pages on mobile reveals lot of similarities.

However, preview need to look like preview and not article page.

Screen Shot 2022-07-27 at 5.43.54 PM.png

Exploring alternate mobile solutions

1) Opening the preview

Screen Shot 2022-07-27 at 6.27.39 PM.png