All language subtitles for 2-08_1 interactive text

A username to know what

What's clickable and what's not

What's tappable and what's not

And the way to

Signify what

Is and what isn't clickable as with interactive text

That can be links

Actions buttons

Input Fields really anything that you can start manipulating with something that's not read only something that can be chained

I would consider in Iraq

And the meaning of your interactive tax that's going to typically vary from Project to project but as long as you have

Interactive text

You're going to let people know that hey you can interact with

I personally I've got here is the super friendly designed systems website and we're just going to take a look at

Basically a black-and-white

Lay out here

With a little bit of

Color

To indicate

Navigation I was probably the simplest form of Link color on the internet

Aside from maybe Google

But in any case we've got these navigation items

Any clearly has

A rollover fact and some active

Lynx going on

Nothing too crazy groundbreaking here but it is worth to know that

These this navigation of here doesn't necessarily look like

Clickable

Body doesn't necessarily mean that it's because they actually look

The actual visual style is the same as when the body copy

But because it's simply app

The top and there's a row of items

We've become accustomed

Pattern enough to know that that means clickable.

Over the top

What's going to be the navigation looks like or not

So you kind of get some passes with

Certain components and certain elements

Because it's been around for so long

It's just kind of inherited that meaning

So even though we have these nice

BlueLine effects

If we were to put lines under all of these it just

They wouldn't be as nice and clean cuz you got this

Nice big block of negative space

And it just kind of has like a nice clean logs

Just a simple navigation example

Scroll down you have the actual link styles

Which are underlined with blue so

It's more of a box shadow that probably animating versus a border

And then the same kind of salads here so

Nice

Simple navigation Style

And then same thing down here

Look at interactive navigation some navigation element

What about an application that's not a website or marketing Silas take a look at the Instagram change password

Word website

Web page

Chicken to hear all of these links are actually

There they don't really look like links but again because they're inside bar

And they're in a row

We kind of know that they're going to be links and you have the bolded font here to let him know that it's active

This is a screenshot or otherwise I would

I would hover over that

And then

For here we have forgot password which is going to link

To another page

So this is treated slightly differently because it's kind of going somewhere else

Versus

Links in the section these are more like

They're almost like

Tabs

They're not necessarily designed as

Table elements

That's why they are just changing the view over here

So they're Interactive

Based on their position and some of the active State versus

Adding a huge amount of color or

Adding a big

Diet tab around

Whereas if you would have just put black text here

It's not really going to do the same even though we are defining

Black text over here as interactive

It would be out of context

Right here and it would almost seem like just

Readable taxo

They're bringing in that

Primary Kind of Blue Collar

Which is

Reverse outboard the change password big called

And so we got one interactive text to inactive tag

Text running here and then down here

Might be a little hard to see you but it's like a dark blue

Like kind of the Instagram brand color

So there's three different interactive text colors here

And that doesn't even necessarily include

The interactive text inside the input field which would be another one

And it's interactive because there is a field around it it makes more sense but it's only Interactive

Because it has that border and that background otherwise it would just feel

Like a label

So there's

Different little context to make things feel interactive depending on what

Other component is

I looking right here at the medium.com settings

Is another example of just kind of a black-and-white

Set up here and

Same thing there's a bunch of links here on the left

If it was in a paragraph format

You might not

Necessarily think the click on that because these are actually lighter in color

Then the body copy

But they are larger a little bit and the active is

And

Actually that's not the actor that has the title for this navigation

All of these are

All these are

Necessarily have to go crazy with your sidebar elements

As opposed to hyperlinks

Where you would need to have an underline or colored come differentiate them

So down here you can see where they have deactivate account

And delete account

In most

And most applications you would see this as like a red color because it's more of like a dangerzone kind of area but

Medium and I guess everyone in the stick with that kind of nice newspaper refill

They've decided to go with this light grey

Deactivate delete account

And in some of their other ones are you no light gray with that border around it to let you know there's

More of an action Associated where that versus kind of a link to another web

And in this example on get hub.com this is if you go into a repository settings

This is where I have the debate

Webpage hosted they have a sidebar that is

It's very apparent that you can click on these because they're blue they have a hover state

It's a lot more

There's a lot more of an affordance

You can actually cook on these

In terms of accessibility this is a lot more usable

Someone else who might get confused with

Just a black-and-white sidebar so these are some things that you have to keep in mind when you're designing

What audience are designing for and what

Level of accessibility do you want to hit and if you look at

These buttons these are other examples of interact

Extremely interactive because it's got the border around it it's got a great-aunt it's got a color

Border

And they're both

They're a little bit larger

So you can tell that it's interactive because just

Because it's got a background color looks like a button

But down here I do want to point out

They make their

Destructive actions which are also Interactive

They're using the same button style but just making the text read because they want to make sure that you know

That this is the danger zone

Depending on the contacts

Text for which they are presenting the button

Slightly different

They want you to upgrade right here to an able

Certain things

For the issues of the sponsorships they

Make this very called out so you can get

And then down here they also have another upgrade now

Call out but then down here it's very different because

You know if I click this

It's going to delay the Repository

It's not going to

Are you absolutely sure unexpected bad things will happen if you don't read this

This cannot be undone

Do you actually have to type in the name of the Repository

And click this

To actually delete it

Then again it's the same

Interactive color that red with the red background

Those subtle changes make you know that this is

Something's very specific is about 1/2

Popping in there doing that with

With red color

And if you are completely colorblind

This would work as well because it's

You know it's going to be a dark contract

And you can still

Read the tag

It is worth noting though with links

Specifically

There are some guidelines for

The web content and accessibility guidelines

They say that use of color

Is not used as the only visual means of conveying information indicating an action pumping response

Or distinguishing a visual element

Tarzan I want to pull up

Another example

And if you look right here it

You can say that there is

Kind of a rainbow of colors going on

And

The way this Albert work is

It's it's

Kind of simple almost

Dom and away

And the people who made this would also admit that

But you basically pick your

You pick your college football team that you are a fan of

And

You then Heckle your most

Teams

With your friends and so basically anytime you click one of these buttons at send the push notification to your friend that has

Your call so if I

Had a friend who was a Florida Gator I could send go dogs

To him

Or her and she could send

Go Gators back to me

And then it would keep score as you can see on here

Very simple kind of a playful like notification

But the one thing I want to do is point out the interactivity

In this

So first of all

Pick your team it's black

So it's kind of the standard position we're heading and then login

Mean blue is going to be a go-to color for interactive text

And

Honestly even if that was black

I think the position alone in the top-right and because it's around it over there

It would still be enough

To know that you can login but the blue definitely kind of help

All of these other ones are just simply based on the college

Teams

It's it kind of a very simple and kind of

Oversimplified layout with just huge tax

And then another kind of fun thing that would happen would what do you like whatever

Team you chose

Your team's colors would then become the title bar

A way to

Make sure that the interactive

On those title bars

Was truly Interactive

I'm I made it so the actual primary color wood

Show up as that

Interactive color and then bring in that secondary

College football team color behind it

So for example if you were to choose

Your

Your tax would end up looking

The secondary color would be like that

And

Your primary color look like that even if your

Background was completely

So that would be kind of like how

Primary and secondary

There's subtle things that you can do to kind of make sure that

Primary Tag Store secondary tags

But actually

It stays looking Interactive

And one of the Surefire ways to do that is going to be put a border around it with a reverse.

And doesn't matter if you use a dynamic color or some other examples

I'll just using how to lighter color which I'll show in just a minute but

Just something that kind of sets it apart and something else that

Make sure that it looks

And you can see like down here this

Not interactive looking

Because I want it to just be more of a read-only

Contacts what's not going to

Confuse

Now this this might be

A place where I bend the rules a little bit

Because I'm I'm

Highlighting

The label

As blue when you're typing in it

And it might be better you know to make it white as a highlight but

I wanted

Even though

We don't really have that much usage of the color blue

Other than maybe like forgot password

And also on

The login or change your team you can cancel

When we're not currently entertaining we're using that blue as the interactive tax

Color so technically fr

Text is interactive that would mean that

This is interactive but it's actually not

There's places where you can bend the rules a little bit

But you do want to be mindful if

Benny not too far because if I started making a lot of things blue

And you admit to diminish the value of that color 1000 interact

App for twelvestone they have a really big database of people that exists already in their system

So they wanted to be able to

It is someone had signed up at a certain event and someone had given their information out of service

And then they were signing up again on

This app

And they had some

Back-end systems that would monitor those people and

And just

Kind of retarded reconcile.

Show a visual way that someone can kind of help

Process along so this is what

We came up with this guy

Douglas is signing up

And we have this kind of burgundy red as our primary color

1

You know one pretty easy way to make sure that your text looks interactive is to pick a primary color

And anything you can tap on or click it's that color

And that's kind of what we're doing here even though you know we do have these secondary actions that are tappable as well

But they're not

So primary so picking a primary

And secondary color for your tag

Will dive way more deeply into that in our color lessons but

It's just a great way to just

Start off with

A primary and a secondary and let it be different

You know then your regular

Readable read-only tax

Are burgundy text we're going to sign up

We're going to either put in her phone number

And it is worth mentioning that

It's kind of a bad form to ask for phone number without telling you telling the person why

That number is being asked for

Providing your phone number will help keep you

Keep your info in sync

So this is why that we can kind of match you up so if you do enter it if

I want to know if I'm already in the system to so maybe that's more encouragement to get in there

But it doesn't look like interactive text

Our interactive area is

Right in here we're asking for the phone number

And we're going we're going to go ahead and pull up.

Number pad by default as well

So it's a little bit more

Intuitive

So they enter their number and then we say okay is this you

No

This tax

Text is really read-only so it's not necessarily

Interactive but this module is Interactive

So

This is kind of one of those gray areas again where it's like

Okay

It's technically in Iraq

Active because you can tap on it and select it

But at the same time it is read-only as well

As our primary color

You're not going to make it

Kind of tone down to a secondary color so it's going to stay as the read-only color

But we're introducing a little ring

Around

The avatar

And that's going to be

Kind of like a

A souped-up check

As opposed to just having a square with a check in it will just say okay if this is selected

Ring around it

Which is our primary color

And I can check

Okay well this is me this is me and actually does me too

And then once I have

Selective

Then I can hit you up that's me

But you'll notice like if nothing is selected

This is not

Interactive

So we can subdue interactivity

And make it based off of a previous election

The same way

My primary action is no that's not me

But if I start selecting people

Now you can't select not me

Toggling the interactivity between multiple elements based on that used

You're not going to be able to just

Design 1 sad

Attic thing and that's going to be at you're going to have to keep in mind

The scenarios of pass

Future

As you design these things and what different states

Things can take on that's going to change the interactive

Colors that you're using in the designs

Check out a little bit more of this

We got

Here for editing the picture

But it's not a huge in your face

Text Isaac

So typically speaking the larger the impact of the interactive tax

The the larger and heavier and the more contrast that.

A particular action

Pizza Hut

Password it's going to be a huge button button this case

Edit profile picture it doesn't need a huge amount of contrast because it's a very low-level interactivity

So we can just simply use the red color but

But keep it the same size as these

Little labels here and that's just enough

You know that you can edit your profile

Okay next I want to look quickly at this project called shiplify which has

A whole lot of information going on

These are just a couple of exported screens

And this app is a

Commercial transportation Logistics

Applications

Probably one of the most complicated project

And

This was probably so I can't remember all of the lingo necessarily but one thing that I do

Do know for sure is that

In this app

People are looking for

Carriers to ship

Their product

From point A to point B

When I really want to dig into is going to be this mobile version here

So it's a little bit easier to kind of Digest

And show what's going on

Okay so we've got

Point A to point B this is user input

And they've hit search

And they've also added some filters I'm not going to go into all that too much

But you can see here like there is a lot of stuff going on here

We got the title of the the the carrier who is going to

Send that information

We've got this kind of like code that the entire industry uses for the carriers

Almost like airport codes

And then there are specific definitions about what

That carrier

Is able to produce

And it's all read-only tax

All of this is basically read-only in this price

Is going to be the price

Is for the shipments

And

It's going to start in Dothan Alabama and there's also going to be a lot of other terminals it's going to make a lot of

The goal here is to get someone to click this entire thing because that would mean I want to choose this route

But

There's a lot of other variables at play here they might want to call this

Particular

City

And then right here that might want to call the

The destination to ask them some questions about drop off

And there's other information like

It's 545

It is a delivery this is the day

When is that happen in this tax is definitely

Not

Accessible I'm pretty sure that I was going to be

A failing kind of thing

Like I said this was done five or six years ago before I was a lot more into accessibility

You can say that definitely fails with gray on

And have to be

Quite a bit darker to pass

Double A

So that had to be a little bit darker so that was mine

But you know

Things happen

That's a simple CSS change

But one thing I want to point out here is

In addition to

Clicking on

This entire thing to select it

As

The choice for the carrier

We've also got

Dislike show all terminals link

And in retrospect this should probably be green because

It's kind of important

And I want that to be known as a very clickable item

I do think that it

With it being bold and because it's surrounded by this line and this.

That it has

It has a lot of

Implied interactivity

It also says show all terminals

But I do think this was green it would be maybe a little bit better especially.

That's an important thing to say but

Basically if you tap

Show all terminals

It will

Expand

And then you can see okay this is going to stop in Lewisville it's going to stop in Memphis

Going to stop in Little Rock

It's also going to pull up a little

Call the actual route

And then you can close that out as well but

It's just another example of

An interactive module

Has a lot of read-only tax but the module itself

Because it's got

A border

Color it looks interact

And there's also these

Blue Interactive icons for making a phone call

There's also this Interactive

Peace and all of them do slightly different things so they have to be styled in a slightly different way

No not everything you design is going to be so complex

There are multiple

Things that someone can do within the same thing and

Sometimes it makes sense to put them all in the same style and other times when they're completely differently

Choosing a few more details

Those are probably going to be styled a little bit differently just

So it will help out the contacts about design

And last but not least I want to show this SmartLine app again

We talked about this

Helpertech

In our previous lesson about kind of textile definitions

This is another example of where

I'm just simply using this

Kind of teal color to show

The interactive nature of.

I mean that's basically the primary color

Activity

Whether it's a checkbox

Active

Or it is changing a Time

And this is another does another kind of example underline

Kind of subtle background to imply a little bit more interactivity between

Caught bigger actions and lower-level actions

Gets more of a

Teal background color in addition to the teal

Action color because you're recording

An actual voicemail

Is primary action which has a lot more contrast

That's basically dark gray with a white tag

For bringing in that same teal background

To show you kind of like

A version of

A message that you might not have read

But it's it's not a full-on action the same way record greeting as background

On top of the read-only tax

To show you

A little bit more of a meaning so we're kind of

Color behind

To give it a slightly different meaning

So you're interactive taxes going to be defined by the following prop

It's going to be Define my position

Size

Call

Wait

And even the surrounding elements like borders backgrounds and icons off to the side all of those things are going

Going to add to whether or not your Tech

Looks like it's interactive or not

And remember as a general rule the larger the impact of the action the more drastic the change in color or

Contrasts or weight should be

So if you have those big actions are going to have more contrast

If you have lower level actions

Maybe a little bit last contract

And I don't always mean like when I say contrast

It might not be

Color contrast necessarily it might be all black-and-white but it just

Has more visual impact

The higher the level the interactivity

The higher

Impact kind of visual impact

It should have or probably will end up having

So for homework

I'm going to get you to design an RSVP form

And I'm actually going to do a quick little wireframe in figma that you can kind of go off of metal help me kind of explain

What to do

I pulled up