All language subtitles for 2-05 truncation

Truncation happens a lot of time and interface design because so much of the data that we designed for

Is often user-generated

And it could be anything from usernames to video titles to body text

Most of the time if you're designing an interface that has some type of

User account

They're signing off and they're doing things

There's going to be user-generated tag

Tweets

Names

I mean video titles

Podcast titles just all of these things at our interfaces

House

Are going to be user-generated content

And I can be one word or can be

40 words so we have to figure out

Where do we draw the line on truncating text

Whether it's titles

Or body title

Body body tax

Let's take a look at a couple of examples starting with the Apple

Podcast

I've got a number of podcast here

And what I want to pay attention to here

Is the truncation of the title

So you can see on the very top number 38 Stillness is the key with Ryan holiday

Now that

But if you look at the one below

It's a lot longer becoming a niche

Reviewer

Story behind backwards with Chase re and then...

Now that one has

Three lines

With truncated

Title so

The designers here are making a decision

That it's got to be truncated at some point and it's better to be after 3

Ben

Four lines because if the Thing extended

Four lines

Then the tax to the right of the image

Would not even it would kind of break the format of that little component

But what's really interesting though if you go down

And I think there's one so if you look at

Crimes of Passion right here Harold no

Looks part 1

That's a very short title

There's no more

Content to break into two or even three line so what they do here is there

They're bringing in the description two lines of the description

And then their truncating the second line of the description and I kind of makes up for

The content that that wasn't able to be filled with a title

And then if you look at

This one for how I built this

Evite Selena

Tobacco Wawa

That's a two-line and then they're only bringing in one line

Of the description where the description

And all of them

You know kind of occupied that sang in my room so there

There these little rules here

Where

You know it's if it's a three-line title and then we're going to truncate at when I'm going to bring in any

Description

Orchid the two line titled I'm going to bring in one line of the description than truncate the description

And that way

You can see that every single one

Has an ice block of text

Related to the cover image

So there's

Three or four variations here just to get some consistency

With each one of these episode

And if you go into one of the details here of a larger

Say I open that off

In order to

Show the entire title they're just having this big markee kind of scrolling thing

And

You know I don't know if that's

Don't really have a lot of other options here because they don't want to

Messer with the controls you know you want to be able to kind of play and pause this more than you want to be able to read the title

So they're kind of making some trade-off there

Based on

You know the title lanes and then what's most important cuz I don't really care that much about

The title I'm care more about

Being able to control the podcast

And things like that

So that's just one example

Looking at this

Apple podcast app

And I want to show you four different

Personal projects of mine or client projects

And we'll take a look at some different ways I had to chunk a different titles different

Different things in the outside

Let's look first at an app called Skyscanner

Okay inside of this app there's

Honda screens all over but I want to focus right on

This guy here

This

Is an older file so some of my icon font that I was using that I do not have on this machine

AR

Are screwing up so just ignore this is also pretty iPhone 11 so there it's like a smaller screen

What I really want to focus on here

Is

This part down here so

Then and just a quick

Stage 4

This was an IOS app

Anna web app that allowed multiple people from the same company

To all booked our flights together and then they could send their information to the manager

And they could see which of their other colleagues had booked certain flights you can all book

A company-wide flight

And you could get on the same flight with other people so it was a way for business Travelers within the same organization

To book their flights together

So in this case

Say I'm looking for flights

And I'm searching from Scotland to Singapore

And I can say okay one this flight

Ross

He's on that why he's already booked at

But what if other people in the company have also booked a flight

So one thing we're doing here is were changing this component

To just show that Ross is booked at

We're changing it to show four people here so now we have

We have Ross

Some guy named e.t.

We have this guy

And an ass

And so

While not even though this isn't a complete truncation of text it's just a way to

Show more information in a in a smaller

Kind of screen

So in this case if we tap this

Drop down which is kind of indicated here that disconnects band

Now we have

This

Component here where Ross is fully expanded

Now we have that same

Version of the component here as a list item

And now we can say okay that's

Edward Taylor

Steve Guymon

And Maddy Smith

These are gray circles because they're pending these are green circles because they look so maybe these people

You know how have a slightly different

Status

But it's

One kind of small and interesting way to truncate information

In a smaller space so

Do you know we are at we do have the title for the person's name

And there's no way we're going to fit more than one of these on a row

So rather than

Clutter up being Tire

Search results with everything on there we can

Kind of make use of clever truncation

And

You know we're also accounting for avatars that are missing

Maybe they haven't uploaded Avatar but at least we can bring in their initials

2

Tucanos

Supplement that material so the user knows what they're looking at

And then if you look at some of the other ones seeing I was just not there because no one's book this year

Another

Kind of interesting way that you there were truncating text here is that

This particular flight from Scotland

It's stopping in London Heathrow

And I guess that's turkey and not sure we'll call it turkey

And then in Singapore so it's

These are airport codes

And we're trying to signify like

The amount of layover time here that was the width

And we also want to show like what airline

Is going to be

Showing

And a lot of this information I got from the team it wasn't like I just knew

So

But we knew that

They're going to be multiple instances where the lack of a flight would be handled by another carrier and so

We're saying British Airways

And two others

And we're showing that to others can be tapped on because it's a slightly different color is that call to action color

And so we know we're not going to say British Airways and air turkey and air Singapore so we're saying British Airways

Which of the first logo Sean and then we have two others

Which is the active tax

So in a way we're truncating those three Airlines into one plus a little bit of Link

Like a call to action that can expand that

Industrially commonly seen on Instagram or

Facebook where it says or even Twitter when it says

Lights by

Your best friend and three others or liked by Matt's and twenty others or am I say life on that Android

And Dan and three others something like that there's a

It's kind of been

An easy way to kind of condensed a bunch of names

Show a little bit of relevant information but then also have the

How the way to show

Even more information

Take a look at my Monera which is a desktop application

Holds

Cryptocurrency

In a digital wallet

So in this case we're using Monero

Which I never heard of until this project

It's kind of like Bitcoin but apparently

More decentralized and and whatnot

Anyway

Let's take a look

Okay someone is going to

Hi my toolbar is here and let's zoom in on this kind of wallet area

All right so what these are all of these crazy long

Wallet addresses are super long

And I show you like this is an actual

The links

7 actual wallet address

And there's just no way that we need to show all of this by default it's a lot of information and no one

Would really ever read all this it's more going to be like copy and paste

The way I'm handling that here is

So this screen the screen is like your wallet so like you can have multiple wallets

So if I got to spending cash Wallet vs my savings

Click here

Go into

This big wallet

And I got these color-coded so you can you can choose different colors for your wallet

It's kind of nice

So whatever while you're in it or show like you know that color for that

Specific wallet

A lot of times

People just wanted to copy

The wallet address so I can

So they can send money or receive money

Tour just giving them an easy way to copy

Wallet

Without having to look at the entire thing

So are active texture is

Is blue blue is kind of like her active

Link color

Had a very specific

At a very specific place

I went out to hear it would just be too too much

But I wanted enough negative space in here

Picanha give copy its own breathing room

We could have gone

Maybe slightly longer

You know right in there

To make it even with

The space on the left and the right

Of each one but we're not really that much information by having a little bit more so I chose to

Right there

That way

You can click on copy and then now if we expand this just like on our Skyscanner

I'm adding like a little kind of drop down here

So if you click on that drop down

It's going to give you the full address

And it's going to give you the view key in the spin key these are other things that

I actually can't remember what they even do but it was important to the project at the time based on my research and talking to the guys who

Developing this

So

Just know that it was a lot of information that didn't really need to show up

On the main wallet

I think this is another reason why I decided to go with

Stop circular

On that

The truncated version up top because I wanted it to kind of match

So if it was closer it would just be a lot of information

And I knew a lot of these were going to be two or three lines

So these are

Two lines in these are three lines

And then you can see again on these there's a transaction detail where it's

Also the same wallet address

But if I go into the section

With the arrow here

That's going to take me to the transaction details screen

Which is right here

And then you got transaction ID you got all these like longer

Long longer information

That is apart of those line items but

You know a lot of that stuff

Just like in the podcast app

You can come

Suck in that information to a list of you to show

A slightly

More relevant

Version of. So you can always kind of think about

What are all of the ingredients that I'm working with on on

A search result for a plane

Airplane trip

Or flight

What are the ingredients that I'm working with

RNR cryptocurrency wallet

Latino transactions OU

Ingredients out and you said okay I can take a part of that

You put it here and then link it to show the full thing

Because what time does not relevant in you want to have a scannable list

Same way on the podcast app

You want to have a scannable less if you can just go there quickly you don't necessarily need to see the whole entire thing

At all times

But it is helpful and the podcast example that you see a lot of the title not just one line of it because otherwise it would be hard

In the next example I want to show the

You probably already seen but you might not remember

On this

You know

List all of these lessons

But I didn't necessarily want to show them all the ones I just felt like that was a lot of information

2

Parse

When someone first landed on the page

So I wanted it to be

I wanted it to

To be a little bit

Intriguing so you know that it's there and you know there's maybe a little bit more

But not kind of overwhelming

And so

All I did here was I

I added

A rectangle on top of this

And a gradient I went from 0% opacity to 100% of Pasadena of the background color

And that way just kind of faded it

Down

And then I just

Adjusted the heighth of that gradient

Based on what I thought looks pretty good until like you can see

123 and then four is kind of

You can barely see what the four is which kind of

Hopefully you can tell that there's more there I did not add a read more or

You know little plus button which would have made it a lot more explicit cuz I thought it was

There's not much else going on the page so

If people are on

Honest and it and they're curious enough then they're going to

Or click bass to see it

So that's another wise just kind of adding a gradient where it fades out

And then lastly I want to look at this

This is like a red camera

Design ideas kind of a concept

And

On the information page you can see it's basically the same exact

Idea that I have this great-aunt here

Only on this one I have more

So you can click Bass

And then it would just expand into more

Information and it works you know whether it's dark

Or light

It's just another simple way to kind of show

You know that there's the ability to read more so with your truncating titles

Truncating Bitcoin addresses

Or Travelers

Body copy

Truncating tax and kind of dealing with bits and pieces of the taxes going to be a big part of

Hiring her face

How your interfaces come together

So I'll post links to a lot of these files down below that you can get into and check out

But for homework

I want you to

Take some screenshots of the Apple podcast app

I can also provide those down below if you don't have access to it

Or something like the YouTube sidebar like you go to youtube.com

Click on a video and you see the sidebar

Something some kind of app

And you might discover one on your own that you enjoy that has some version of like truncating tax

With titles and body copy or you know one of the other

The Apple podcast that will be great

I don't want you to go through and try to

Really pixel-by-pixel

Recreate at least

325 of those components if not the entire screen

And you'll get an idea for the line-height

And where the truncation takes place how many characters it is

And just get a feel for truncating the text

And

Maybe even playing with the way that one component can handle multiple versions of that or do you know

Do you need one or two components and you also don't need to use

Are reusable components for this necessarily but it would be a good way to kind of

Break into that and start

Discovering some ways to handle that information

But definitely posted into slag and let us take a look less than feedback

And

I'll see how it goes