Breakup of Epic
Content and Card Layout:
As a user I want to get quick context about a link. A combination of text and image will help me learn.
Define the text and Image area
What does it looks like when there is no image?
Character Counting/ Text Area Setup and Truncation:
As a reader I want sufficient context, I want it to be easily readable and I don't like to see sentences that are abruptly cut off.
Determine type size and leading so sufficient content can be seen.
Consider truncation in the bottom right edge of the text area.
Consider other languages.
As a reader, the preview should feel like a simple and fast reading experience.
Greek and latin characters are hard for me to read.
Latency & Prefetching:
As a reader, I'm looking to get back to my main article after learning about this link. The preview experience is useful, if it is snappy.
Focus on how quickly the title and text is loaded.
Loading animation and crop area for the image.
Optimize for the image and pre fetch article in background.
As a reader I want a smooth and continuous experience for link previews. I will hop through many of them in a reading session.
How does the card animate in?
What is the treatment of the background article in order to draw the user's focus to the preview?
When it is dismissed, how does it move out of the screen? Include dismiss area target details.
What does navigating to the article look like? Include interact area target details.
Which words will not produce previews?
- Links in references
- Help Links
- Main page Links
- External Links